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Our Data Centre.Your peace of mind. 


Step 1: 
Select Operating System © 


Cobalt RaQ 


from £74.99 per month 
The original "Web-in-a-box" solution. 


Red Hat Linux 


from £99. 99 per month 
Red Hat Linux is the induicy standard for 
web hosting. 


Microsoft Windows 


from £199.99 per month 
Microsoft Windows, the choice of small and 
large businesses alike. 


Sun Solaris 


from £199.99 per month 
The market leader for reliability and performance. 


from £99.99 per month 
wap servers safe i in our Dale Genie, 


‘0870 333 0960 


= Step 2: 
Select Specification © 


RaQ 128 

128MB/20GB/5 GB Data Transfer 
RaQ 256 

256MB/20.4GB/15 GB Data Transfer 
RaQ 512 

512MB/30GB/25 GB Data Transfer 
RaQ 550@ED 


256MB/40GB/15 GB Data Transfer 
512MB/2x80GB/25 GB Data Transfer 


Entry 
Celeron 1Ghz/128MB/40GB/5 GB Data Transfer 


Professional 
PIll 1.13Ghz/256MB/60GB/15 GB Data Transfer 


Ultra 
PIll 1.266Ghz/512MB/80GB/25 GB bata Transfer 


Ultra Il 
2xPIll_ 1.4Ghz/512MB/2x18GB SCSI Hard 
Disks running RAID 1/35 GB Data Transfer 


Enterprise 
2xAMD Athlon 2Ghz/1GB/4x36GB SCSI Hard 


Disks running RAID 5/50 GB Data Transfer 


Enterprise Xeon 
2xIntel® Xeon® 2Ghz/2GB/4x72GB SCSI 
Hard Disks running RAID 5/75 GB Data Transfer 


Advance 
2xUltra Web Servers/Ultra |] Database 
Server/Mail Server/100 GB bata Transfer 


Corporate GD 

3xUltra Il Web Servers/Ultra Mail Server/ 
Enterprise Database Server/ 

250 GB Data Transfer 


Corporate Advanced Gap 
4xEnterprise Web Servers/Xeon Database 


Server/Enterprise Mail Server/ 
400 GB Data Transfer 


Sun Netra X1 128 
400MHZ/128MB/20GB EIDE/ 
15 GB Data Transfer 

Sun Netra X1 512 


400MHZ/512MB/20GB EIDE/ 
25 GB Data Transfer 


Your server safe and secure in our Data 
Centre. Choose from a range of data transfer 
(bandwidth) per month and benefit from 
24/7/365 unlimited technical support. 
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= Step 3: 
Select Security © 


r Firewall 
ai only £100per month 
Protect your machine from unwanted visitors. 


Web based control panel allows you to add 
rules and deny undesirable visitors. 


Back-up 

Daily - only £120 per month 

Weekly - only £60 per month 
Running databases, holding customer 
information or involved in e-commerce? If 
your answer is "yes" then order back-ups now 
and benefit from free restores if required! 


Advanced Systems 
Monitoring Free) 
only £30 per month 
The ultimate tool for knowing how your 
server is operating and running. Pre-empt 


critical failure and minimise server downtime 
with messaging via e-mail or SMS. 


Plus Package 

only £199.99 per month 

(Save £600 per year) 
Firewall, Daily Back-ups and Advanced 
Systems Monitoring bundled to save over 
£600 per year! The complete solution to your 
Web hosting security. 


= Step 4: 
Relax with...© 


FREE AND UNLIMITED 


Technical Support 

Unlike most of our competitors we do not 
charge for technical support or aftersales 
service. Available with every Dedicated 
Servers product, you can call or e-mail our 
support team on an unlimited basis, 24/7/365. 


Service Level Agreement 
Standard SLA: 

Our Industry leading SLA is your guarantee of 
a totally reliable service. We'll pay you if it's 
not! Benefit from 99.9% Connectivity, 30 
minute reboot guarantee, 1:1 Contention ratio 
on bandwidth and a Price Freeze-forever! 


Advanced SLA: 

Specially tailored for Enterprise level services 
and above, the Advanced SLA is perfect 
for mission critical sites. Backed by a 
money back guarantee, benefit from 
99.999% Connectivity, two hour hardware 
resolution, 30 minute Reboot guarantee, 1:1 
Contention ratio on bandwidth and a Price 
Freeze-forever! 
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» WEBppliance 


@®windows Version 


Free Ensim software pre- 


installed and ready to run on every 
Linux and Windows server! 


This industry-leading, web hosting platform allows our resellers and customers to manage their hosting 
environment and administer their server with no technical ability. Ownership of the administrative 
functions and configuration of your own server will delight your customers, maximize performance and 
minimize costs. Ensim will transform your Dedicated Server into an easy-to-use, web hosting 
appliance that's ideal for web developers, designers and single site users alike. 


For resellers: For single site users: 


Set-up shared hosting accounts Your own server (no sharing!) 
Control panels for your customers Easy back-up & restore 

Integrated DNS support Web-based e-mail 

Full bandwidth management Detailed on-line help & manual 
Customisable private label control panels Real-time web-based control panels 


SSH Access 


Free with Linux & Windows Servers 


Contact Us 


- 
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We constantly monitor the competition and know we offer the best value, feature-for-feature dedicated hosting 
in Europe. We are after all, the generic name associated with scaleable, secure hosting. We will beat any like 


for like quote...try us! 
ad 
8 Orn 


supporting 


online Europe 


for business 


Call us and place your order via 
credit card or direct debit before 
4:00 p.m. (Monday-Friday) and 
we'll have your server up and 
running on the same day! 


= Our UK Data Centres are 


designed, owned and managed 
by us. Situated in London and 
Nottingham, they benefit from the 
latest security, back-up, power 
and climate control features 
available. 


f At Dedicated Servers, we are 
committed to providing you with 
the highest levels of customer 


service, covering all aspects of 
the customer relationship 
including: | communications, 
accuracy, performance, privacy, 
security and complaints 
procedures. 


Buy any RaQ (256 MB and above) and get a 
RaQ3 128 MB 


For a strictly limited period, Dedicated Servers 
will enable Advanced Systems Monitoring on 
your dedicated server absolutely free, forever! 
Available with every server over £199 per 
month! Call now and don't miss out! 


Your peace of mind. 


Dedicated Servers 
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CREATING DIGITALARTWORK 


@ Illustrating in 
Photoshop 


Commercial Illustrator Jacey 
demonstrates how to use 
Photoshop's artistic powers to 
create a stunning composition 


S 28 Retouching 
photos in 
Photoshop 


Improve your photomanipulation 
skills with digital artist Derek 
Lea and Photoshop 


2 34 Getting started 
with Painter 7 


Painting a digital masterpiece on 
your Mac or PC is easier than 
you think. We show you how... 


e 38 Getting started 
with Illustrator 10 


Creating vector-based 
illustrations can seem a tricky 
business, but with our tutorial it 
becomes a cinch 


NAVIGATION 


Find your way around — let 
the colour guide you 


WEB DESIGN 


“Z! Getting started 


with Dreamweaver 
MX 


Essential Web design skills for 
Dreamweaver revealed 


49 Getting started 


with Flash MX 


We recreate the same site built 
in the Dreamweaver MX tutorial, 
but use the additional powers of 
Flash MX 


54 Getting started 


in Flash animation 


Animation is a speciality of 
Flash. We show you how to 
master the key skills 


© COVERCD 
Demos, movies and 
resource files on the CD 
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OAs}:: Getting started 
in Bryce 5 


The complex world of 3D 
modelling and rendering 

is made easy with our Bryce 
5 tutorial 


Getting started 
with Poser 4 


Design and pose a 3D character 
using this popular human 
modelling application 


76 D Sculptor 
and Bryce 


Learn to turn everyday items into 
3D objects with the full 
application on our CD, then 

use these objects in stunning 
digital artworks 


sts! Getting started 
with InDesign 2 


We show you how to lay outa 
page and use /nDesign’s toolset 
to design a magazine spread 


q 99) Getting started 


in Director 8.5 


Multimedia isn't hard to design 
— thanks to our tutorial in which 
we show you how to create an 
interactive CV 


| FEATURES hg REGULARS 


07 CD contents 


All the tasty offerings on our CD listed, 
including the full version of D Sculptor 
worth £500 


26 Subscribe! 


Save money when you take out subscriptions 
to Computer Arts and Computer Arts Special 


53 Subscribe to CAS 


Want every issue delivered to your door? Then 
take advantage of this subscription offer 


64 Back issues 


Missed an issue? Better turn to this page fast 
as our back catalogue is selling like hot cakes 


: Get started in digital art 


We give you a complete overview of the digital creative scene — find 


out what the best software is, what it does, and how you can use it to 


become a successful digital artist... 


| cae 
‘ Competition 
Win one of five copies of procreate Painter Z 
Enter our competition today 


85 Upgrade and save 


Big savings on the Standard and Pro versions 
of D Sculptor 2 can be found on this page 


98 Next issue 
be “4 . nd « Issue is coming. For details flic > 
¢ Abeginner’s guide to ActionScript ers 
your diary 


The built-in scripting language Flash offers can baffle Web design 


newcomers. Our expert article breaks it down for you... 
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Flash MX 


Marker insertion tool active 
Macromedia's vector animation package has 
become an all-round Web design tool. Learn site 
design and animation starting on page 48 


ip gr po” 


MISSING IN ACTION... 


Mot resem MX Liana ee 3 


Adobe demos 


When we set out to do an issue on getting 
started in digital arts, we intended to bring you 
every single demo you would need to follow 
our tutorials on the CD. Unfortunately, they 
would not all fit. If you want the demo for any 
Adobe product, however, the company has 
demo CDs for the first 5000 readers to request 
them. Leave your details at [w] www.adobe. 
co.uk/tryoutcd and a disc will be dispatched... 
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wreamweaver is one of | 
| complensty that emerge 


Dreamweaver MX Director 8.5 


Use this demo to design a fully functioning Website. The Director 8.5 Shockwave Studio is the leading 
Turn to page 44 to follow ourtutorial multimedia design tool. Try this demo 


adits special 
interactive 


Get started 


Try these great programs! 
Dreamweaver MX - design Websites with it on page 44 
Flash MX - the world’s favourite Web content tool 

Bryce 5 - use it with D Sculptor to create great images 
Poser Pro Pack - 3D character design made easy 

Director 8.5 - create an interactive CV on page 92 


Poser Pro Pack 


It’s a favourite amongst Computer Arts readers and When it comes to 3D character creation, Poseris 
if you want to learn how to use it turn to page 68 where it’s at. Try out the demo today 


Also on the CD: all the files and resources required to follow the tutorials in the magazine 


For full listings and contacts, see your CD inlay card. For free 
downloads go to [w] www.computerarts.co.uk. 
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Illustration: Derek Lea [w] www.dereklea.com 
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igital art — a medium that is 
3 truly symbolic of the 21st 
century. Fusing art and 
constantly evolving 
technology, the medium presents 
artists and illustrators with even more 
tools than ever before for 
expressing their creativity and 


i. inner thoughts. The time 


of the digital canvas has 
welland truly arrived, and 
if you’re not using your 
computer for something creative — 
you should be. 
Modern creative software is to a 
digital artist what paints are to a painter. 
And, indeed, like a painter and his 
paintbrush, a digital artist and his copy 


Getting 
started in 
digital art 


The world of digital creativity beckons. But 
just what do you need to make it big in 
digital art? We tell you everything you need 
to know to get started and more, be it in 2D, 
3D, Web design or animation... 


of Photoshop are seldom parted. Digital 
tools are like traditional tools — 
different artists have different 
preferences. What is concrete, though, 
is the presence of one creative 
application on each and every digital 
artist or designer’s computer. And that 
application is Adobe Photoshop. 

The beginnings of this application 
were fairly modest. Brothers Thomas 
and John Knoll, created the tool as a 
‘digital darkroom’ for photographers 
daring to move away from traditional 
photographic editing techniques. After 
being quickly snapped up by Adobe, 
Photoshop 1.0 was released — in 
February 1990 to be precise. But why 
go into details of the origins of this > 
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create your digital art? 


Mac or PC? The question that has ignited 
many fiery arguments amongst designers 
and digital artists. The burning question is: 
which is better for those wanting to 
express their creativity through a 
computer? Ironically, there is no definite 
answer. And with powerful systems being 
churned out by Apple and a number of 
Wintel manufacturers, it’s almost certainly 
down to personal preference. 

The argument stems mainly from 
Apple's long-term association with the 
graphic designer and illustrator. From the 
humble beginnings of the Mac Classic, to 
its new dual 1GHz G4 system, Apple has 
touted itself as a company for creative 
professionals. Its operating systems look 
great (particularly OS X), are easy to use, 
and close ties with the likes of Adobe and 
Macromedia means that Apple can 
optimise Photoshop et al — resulting in 


speedier processing times. 


Get started 


Does it really matter which kind of machine you use to 


However, with PCs now topping 
2.5GHz, the likes of Photoshop, Illustrator 
and a whole variety of creative 
applications take advantage of the 
processor speeds (and, indeed, the wide 
range of powerful graphics cards 
available). For 3D work, PCs are a good 
choice because of the range of 
professional graphics cards on offer and 
the fact that there is a wide range of 3D 
applications that are PC only (so you have 
no choice perhaps?). The likes of Poser, 
Bryce and even Maya Complete are 
available on the Mac — although 
professional graphics boards are sparse — 
so again, it’s really up to you. 

Whichever you choose, a top-of-the- 


range system from either Apple ora 


company such as IBM will more than 
suffice for digital art and design. In terms 
of looks, though, there's only one winner, 


and we think you know which we mean. 


application? Well, as you'll soon find 
out, if you want to become a digital 
artist, you'll need to know Photoshop 
inside and out. Through various 
releases more image-editing 
functionality was added. Notable 
releases include version 3 bringing 
layers (more about this ina bit), and 5 
sporting a History Palette — effectively 
enabling unlimited undos. And now 
version 7 is upon us. Twelve years have 
passed since Adobe Photoshop first hit 
the shelves, and it’s certainly evolved. 
Tools such as the Healing brush, which 
enables you to quickly remove 
blemishes and scratches from images, 
and the all-new painting engine, which 
adds a natural-media toolset to 


Take a long, hard look at it, because if you want to get into digital art, you're going to have to master 
the Photoshop interface and its many, many creative tools. 


Photoshop, are both exciting additions 
to version 7 of the application. 

At least a fundamental knowledge of 
Photoshop should be with you before 


you step out into the world of digital art. 


Ultimately, creativity should lead the 
way — but without the knowledge of 
how certain things work and how 
Photoshop should be used, you'll 
struggle. Whatever area of digital art 
you intend to embrace (Web design, 
digital video, 3D and so on) you will 
have to use Photoshop at some point. 


Photoshop freedom 


Digital artists thrive on the creative 
freedom that Photoshop provides. In 
recent times, professional Photoshop 
artists have veered towards the 
abstract — combining all manner of 
media to get the result they want. 
Scanned elements are combined with 
digitally-created elements, some 
artists even going to the lengths of 
scanning insects and animals and then 
working over them with Photoshop's 
wide range of creative tools. 

A certain way of thinking is needed 
when approaching Photoshop. Don't 
think of it as a way of creating digital 
art, more a means. Let Photoshop work 
as a tool to accomplish your vision by 
whatever means necessary. [here are 
so many tools in Photoshop, and you'll 
probably never need them all. However, 
there are some techniques that need to 
be in place from the start. After you've 
learnt the basics, you can begin to 
experiment with Photoshop's wide 
range of creative tools. 

Photoshop is a versatile tool. From 
the moment you pick it up and import 
an image you will create something 
unlike anything you've seen before. 


Many start by experimenting with the 
program's wide range of filters. These 
take your image and apply certain 
effects to it. Photoshop's range of filters 
include Artistic filters — giving your 
image a painterly-like effect, Stylise 
filters for adding effects such as 
emboss and cutout and many, many 
more — all of which add varied and 
interesting effects to your image. 

Of course, Photoshop is not just 
about effects. Photoshop filters now 
have somewhat of a stigma attached to 
them. Designers tend to stay away from 
the clichéd look that filters can 
produce, preferring Photoshop's Levels 
and Curves tools, and using layer- 
blending effects and other methods to 
achieve the correct composition. 
Selection tools must be mastered to 
create realistic compositions, and the 
Layers palette is vital to your 
progression as a digital artist. 

Photoshop holds the potential to 
unlock your creativity. What we've 
looked at here is only a smidgen of the 
high-quality tools on offer. The tools 
available, if mastered, can shed a new 
light on your digital creations. What’s 
more, the app can be used to create 
images for output to professional print 
or for distribution on the Web — thanks 
to a magnificent colour engine and the 
great save for Web tools. 

For an introduction into these and 
other creative Photoshop illustration 
and image-retouching techniques, see 
our tutorials beginning on page 18. 

There are many pretenders to 
Photoshop's crown. There are many 
budget alternatives — including the 
likes of the PC-only Paint Shop Pro ([w] 
www.jasc.com, priced at £94) and 
Adobe's own budget application, 


Photoshop Elements (£88 from [w] 
www.adobe.co.uk). And we mustn't 
forget procreate’s Painter 7(£250 from 
[w] www.procreate.com) — a tool that 
enables you to create natural media- 
esque artwork and is, rather thana 
competitor to Photoshop, a great 
compliment to it. Follow our beginner's 
tutorial, starting on page 34. 

Whichever way you look at it, if 
you're serious about getting into digital 
art you need Photoshop. Although 
£528 may seem a lot to begin with, the 
investment will be justified as you 
discover the power that it has to offer. 
It’s more than just an image-editor, and 
if you're serious about getting into 
digital art, it will become your best 
friend. Whether you design for print or 
the Web, it’s invaluable. 


Web design 


The Web is no longer just a place of 
hyperlinks. It’s a medium in which 
designers get to show off their creative 
skills — yet is often a place of 
compromise. With broadband Internet 
access still to truly catch on in the UK, 
the objective of most Web designers is 
to create a site that loads quickly, yet 
provides an entertaining showcase 
experience. With new Web-orientated 
tools being released almost by the day, 
the modern Web designer is faced with 
many applications providing many, 
very different Web experiences. As it 
stands, though, HTML is still the way to 
go. Although sites can now be built 
entirely in Flash (more on this in a bit), 
HTML code should be used to at least 
host the Flash movie. This way, search 
engines can track your site, and those 
without the latest Flash plug-in can be 
redirected to an HTML-only site, ora 
download link. 

Recent trends have seen HTML 
design go back to minimalist design — 
a great deal of designers opting for 
simplistic rollovers and minimal 
JavaScript. Colours are more subdued 
than ever — with grey and white, and 
small point sizes being particularly 
fashionable at the moment. 


Flash MX provides the digital creative with a 
vast range of tools for creating all manner of 
animations and Web applications. 


How | got into digital art... 


Three established digital artists reveal their entry into the world of digital art and design... 
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lan Anderson 
The Designers Republic 


lan Anderson, founder of the cult design 
house, The Designers Republic, first moved 
to a digital way of working in the late 
eighties. “We got a Mac Il in 1987 It was, like, 
massive. We had a graphics tablet, a Mac Il, 
Pixel Paintand Adobe Illustrator. They came 
with it and the whole thing cost about 
£10,000,” he jokes. 

lan goes on to explain the somewhat 
unconventional reasoning behind switching 
to digital methods. “The reason we got the 
computer was because we were drawing so 
many jaggy fonts at the time that someone 
said, ‘Why don't you get a computer, so that 


you don't have to do that?’ But then when we 


got the Mac, someone mentioned PostScript. 


We said, ‘Oh yeah, PostScript, whatever.’ But 
then we realised we couldn't get jaggy fonts 
because everything was PostScript. So we 
got a Mac to do a specific job and you can 
imagine how angry we got that it had a 
specific job that it couldn't do. We kind of 
complained about it.” 

Still, the computer has certainly come in 
handy, The Designers Rebublic becoming 
one of the most successful and respected 


design studios in the UK, if not the world. 
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Jacey 
Freelance illustrator 


Freelance illustrator Jacey has been 
responsible for many of Computer Arts 
Special’s cover illustrations. Jacey’s style is 
commercial, yet wonderfully adventurous 
and imaginative. Jacey’s first experience 
with digital art came ten years ago. “My first 
encounter with a Mac was on my degree 
course at the University of Wolverhampton in 
1992,” he tells us “Using an LCll or Ill anda 
black and white scanner, | had to mock upa 
editorial spread for my photography course 
work. That took about three years” he laughs. 
Jacey’s first hardware and software was 
a fairly modest set-up by today’s standards, 
but put him in good stead for the future and 
he soon had commissions. “I bought a 
Centris 610 with 8MB RAM and a 250MB 
hard disk. Using Photoshop 2.5 and an Epson 
colour scanner | subsequently produced two 
pieces of digital art which were published in 
the British Journal of Photgraphy. They were 
pretty bad, if not shocking,” he tells us. 
Jacey obviously thinks originality is the 
key, as his advice for the beginning digital 
artist proves. “There's far too much digital art 
and design imitating each other. Progress, 
develop, and use your imagination. It’s free 


and it won't hurt.” 
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Derek Lea 
Freelance illustrator 


Canadian Derek Lea is a regular contributor 
to Computer Arts and Computer Arts 
Special, and over the past few years has 
produced many cover and feature 
illustrations for the magazines. He tells us 
how he first got into digital art. 

“| became an illustrator after | was working on 
a computer for years. | started working ona 
Macintosh using /llustrator 3.2in 1991, | 
think. He continues. “| saved my money and 
bought a second-hand Mac Ilci in 1993. That 
was when | really got into playing around in 
Photoshop as wellas experimenting with 
early versions of Painter, Strata Studio Pro, 
and Bryce. Back then it was all about fun and 
simply exploring the tools. Never did | think | 
would be working as an illustrator.” 

We couldn't have put Derek’s advice for 
aspiring digital artists better ourselves: “Get 
busy and make millions of mistakes, it’s the 
only way to learn,” he says. “Digital work is 
especially time-consuming, you will need to 
learn as things change, you will need to 
understand your software, hardware, your 
tools and how they work, fix glitches, etc. 
When you get a feeling for what you can 
achieve in specific apps, then you can decide 
how to combine them. It is through this sort 


of playing around that your style can evolve.” 
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Macromedia Dreamweaver MX is by far the most popular Web authoring application around. This is 
all thanks to its easy-to-use interface and powerful design and coding tools. 


By far the most popular Web 
authoring package is Macromedia's 
Dreamweaver. For many years this 
application has been at the forefront of 
Web design, being intuitive for non- 
coders and understanding to those who 
are fluent in HTML and JavaScript. 
Dreamweaver itself is now known as 
Dreamweaver MX (£351 from [w] 
www.macromedia com). What the MX 
stands for is stilla mystery to us, but 


The Digital Arts Festival 


This year's essential event for each and every digital creative.. 


Bringing together designers, digital artists and the whole of the 
creative industry, the Digital Arts Festival will be the creative event 
of this year. The successor to the incredibly popular Computer Arts 
LIVE, the event will be held at Olympia in London from 9-11 October. 

This year’s event will feature some of the biggest names in the 
industry as speakers. These include David Carson who is probably 
the world’s best-known graphic designer, Web designers Hillman 
Curtis and Brendan Dawes, 3D animation guru Mike Milne (of 
Walking with Dinosaurs fame) from Framestore-CFC and Digital 
Domain's Laurence Plotkin (his company was responsible for the 
effects on such blockbusters as A Perfect Storm). 

The event will be divided up into villages for Graphic Design, 
Mew Media, Digital Video, Digital Audio and 3D — so whatever field 
your interested in, there will be something for you. 

There'll be demonstrations of the best software and hardware 
currently available, with the likes of Adobe offering hands-on tips on 
using its latest software releases. This is your chance to meet the 
industry and get ahead of the game. 

Tickets are priced at £18 for the three days and £12 for one day. 
Concessions are available for subscribers, students and group 


bookings. Order your tickets online now at [w] www.dafestival.com. 


what we do know is that it remains as 
excellent as ever. Beginners may 
shudder when first opening up the 
application — its plethora of options are 
rather intimidating at first. The 
application offers several ways of 
constructing a Website. But the 
premise of site design remains the 
same whatever application you use. 

You must plan your site. Whether you 
do this ina specialist planning 


application or using a pen and paper, 
it's essential that you decide which 
pages link to which, what the purpose 
of your site is and so on before you do 
anything at all. When actually creating 
your site, a knowledge of HTML and 
JavaScript will be an advantage — it 
will ultimately offer you more control 
over your site — but is not at all 
necessary. Dreamweaver and GoLive 
both offer the designer with a Layout 
view enabling you to place tables and 
layers in order to position graphics and 
multimedia content. These tools make 
it easy for anyone to design good- 
looking pages ina short amount of time, 
and they enable you to be creative in 
your use of text and position of images. 
They also offer Wizards so you can get 
your site up and running in no time at 
all. Start designing your site in 
Dreamweaver MX with our tutorial 
beginning on page 44. 


Taking Web design further... 


The methods previously discussed will 
enable you to produce sites that convey 
content in a graphical, yet relatively 
static way. If you want to get animated 
on the Web, there are certain tools you 
need to be very aware of. And one 
immediately springs to mind: Flash. 

Over the last three years or so, 
Macromedia Flash has developed from 
a tool for simple Web animations into a 
package capable of building entire, 
dynamic and interactive Websites. The 
basics of Flash are relatively simple 
though, and you can aim to be on track 
within weeks, developing a good 
knowledge of the application after only 
acouple of months. 

Flash works mainly with vectors (see 
Master Illustration on the next page) 
keeping file sizes down to a minimum. 
However, it features a wide variety of 
bitmap and video import tools for 
creating content for high-bandwidth 
distribution. It also uses symbols 
(repeated elements) to keep file sizes 
down. These are stored in the Flash 
Library and can be edited and reused at 
anytime. If you’re going to learn Flash — 
a knowledge of symbols and exactly 
how they work is imperative. See our 
tutorial, starting on page 48 to get 
started with Flash MX. 

There's also a little something called 
ActionScript. This is where it gets a 
little tricky but, with some creative 
application, this scripting language is 
one of the most powerful around. 

Many designers are constantly 
pushing the boundaries of Flash MX, 
developing new ActionScript 
commands that do almost anything — 
from triggering dynamic events and 
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Toon Boom Studio v2 provides a plethora of quality Web animation tools. It’s tricky to use at first, 
but once mastered, is intuitive and powerful. It’s great value at under £300 as well. 


creating objects on-the-fly, to complex 
navigation devices that would simply 
not be possible in any other 
application. Check out our Beginner's 
guide to ActionScript feature beginning 
on page 58. There are, of course, many 
other Web animation tools — although 
few offer the exciting interactivity tools 
that Flash does. 

Toon Boom Studio 2($374 from [w] 
www.toonboom.com) is a top package 
— and is probably the best application 
for creating 2D cartoons for distribution 
on the Web. Be warned, though. A 
knowledge of (or dedication to the 
cause of) fundamental animation 
techniques is needed for this kind of 
application. There are also budget 
options such as the popular SWiSH 
($50 from [w] www.swishzone.com) and 
alternatives such as Adobe's 
LiveMotion 2(£175 from [w] www. 
adobe.com). LiveMotion is particularly 
useful for those familiar with Adobe's 
range of tools — being similar to both 
Illustrator and After Effects in its 
appearance and feature-set. 

Other tools enabling the creation of 
interactive Web content include 
Macromedia Director 8.5 (pricey at 
£1115) and MindAvenue’s AxelEDGE 1.5 
(£846 from [w] www.mindavenue.com). 
The former, a long-time standard in the 
creation of CD-ROMs (our coverdisc 
was made with it) now has some pretty 
spectacular features. Although the 
learning curve is undeniably steep, 
Director enables you to add 3D models 
(created by an external 3D application) 
to a Website and add realistic 
animation along with all sorts of 
interactivity. Like Flash, Director has its 


own scripting language —called Lingo. 
For a good example of the creative 
capabilities of Director, pay a visit to 
[w] www.shockwave.com — most of the 
content here is created in Director and 
published out as Shockwave content 
(Director publishes to the Shockwave 
format — the Shockwave player is 
freely available as a Web browser plug- 
in). See our tutorial — Getting started in 
Director 8.5, beginning on page 92 to 
make a start. Another 3D tool is plasma 
from Discreet (£525 from [w] 
www.discreet.com). This provides many 
of the excellent modelling and 
animation tools found in Discreet's 
high-end 3D tool, 3ds max, but offers 
Flash and Shockwave export. 

Whatever tool you use to bring 
interactive content to your Website, 
remember that in the end it’s all about 
the user’s experience. It really doesn't 
matter how good something looks if it’s 
infuriating to use. Strike a balance 
between aesthetics and functionality 
and you'll succeed. 


Master illustration 


In 2D design, there are two distinctive 
categories: bitmap and vector. The 
former is what you'll be editing in 
Photoshop. Bitmap (or raster) images 
are made up of pixels, and can only be 
downsized without any loss of quality. If 
you try to increase a bitmap image in 
size, Photoshop has to create extra 
pixel data, therefore taking away from 
the quality of the image. Vectors, 
however, are somewhat different. 
Vector images are made up of 
mathematic calculations — no pixels 


are invloved. So, you can create a 
vector image the size of a postage 
stamp and blow it up to the size of a 
billboard without any loss in quality. 
Put simply, a vector application will 
create, say, a square and then when you 
scale it up will create the same square, 
but at a bigger size. A bitmap 
application would, on the other hand, 
create a square, but when you scale it 
up the application will adjust the pixels 
to the new size. 

In vector applications, you work with 
objects. Each object is editable 
independently and can be combined 
with other objects to make new shapes. 
You'll need to master the Pen tool to 
progress in /llustrator. This enables you 
to draw Bezier curves and edit them 
accordingly to create complex shapes. 
See our tutorial beginning on page 38 
to begin using the Pen, and the other 
creative tools in Adobe /llustrator. 

In terms of software there are two 
definite industry leaders in the field of 
vector illustration: Adobe /llustrator 
(£387 from [w] www.adobe.co.uk and 
Macromedia FreeHand (£328 from [w] 
www.macromedia.com). Both offer 
similar tools and have similar ways of 
working. There are many arguments 
about which is best — but, in the end, it 
is down to personal preference. Before 
splashing out, try the demos, then you 
can make up your mind. 

Recent trends in vector illustration 
have seen the artist strive for a more 
realistic look. A good example of this is 
the work of Arnold Dawson (see issue 
70 of Computer Arts magazine). This is 
borne out of vector applications such 
as Illustrator and FreeHand now 
including tools like lens flares and 


Adobe /llustrator is a powerful and easy-to-use vector drawing application. New features for 
version 10 include symbol functionality and a wide range of warping and morphing tools. 


Get started 


13 


Macromedia FreeHand 10is one of the 
industry standard vector drawing applications 
- the other being Adobe /llustrator. 
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gradient meshes — with which you can 
create realistic highlights and vector- 
based shading. 

In general, though, vector illustration 
often has a certain crispness that you'll 
either love or hate. Colours often are 
flat and bold and can occasionally have 
acartoon-like quality to them. If you 
like this look, vector graphics will 
appeal to you immediately. If you don't, 
a little creativity can change the way 
vectors look. A good idea is to set 
yourself to not be constrained by the 
medium. Build up objects on top of 
each other, using gradients to create 
shadows and highlights. Don't be afraid 
of getting into too much detail — use 
the Pen tool creatively to add small yet 
important elements to your graphics. 
Working large and then scaling your 
graphics down is a good idea. Also, get 
used to the Zoom tools. The thickness 
of a line can make the difference 
between cartoon and realistic-looking 
images — take your time when choosing 
line weights and colours. Text in vector 
applications is a lot more manageable 
than in bitmap-based packages — so 
experiment by placing text along a 
path, converting fonts to outlines and 
editing them and so on. 

Photoshop will accept the import of 
vector graphics — although it needs to 
rasterise them first — making them into 
pixels and losing their infinite 
scalability. So, before you export to 
Photoshop for further editing, make 
sure you've got your vector graphics 
exactly how you want them. 


3D for the masses 


3D modelling, rendering and animation 
is often perceived as one of the hardest 
areas of digital art. But this needn't be 
the case. There are many applications 
that enable you to get up and running 
extremely quickly. Two such 
applications are Bryce (version 5 costs 
£229 from Corel) and Poser(version 4 
costs £234 from Curious Labs). These 
are very different programs, but both 
can give you pleasing results from your 
first ever session of work. 

As you'll discover from ourtutorial 
beginning on page 68, Bryceisa 
landscape-generation package. This 
means you can create all manner of 
terrains, from realistic countryside to 
alien landscapes. The package itself 
provides you with an easy way in. 
Objects can be created in one click, 
and edited with another and a drag. 
Modelling skills are not immediately 
necesary in Bryce, making it 
particularly easy for the beginner to 
start learning the basics of 3D without 
diving in at the deep end. 


Another easy-to-use application is 
Poser 4. This is a character-generation 
package, enabling you to create 
complex characters with little effort. 
Our tutorial on page 72 introduces you 
to the basic techniques needed to 
create 3D characters in the application. 

Poser provides a good introduction 
into Inverse Kinematics (IK) and 
Forward Kinematics (FK). These are 
systems used by 3D applications to 
correctly simulate the movement of 
joints. Constraints are used to tell the 
3D application that, say, a leg bone 
should not bend forward at the knee. 
You link bones with joints to create a 
skeleton and then bind this to a ‘skin (a 
3D model of a character). Luckily, when 
you create a new character in Poser, IK 
is already set up for you — making 
posing and animating your modela 
breeze. You can even add walk cycles — 
Poser automatically assigning lifelike 
animation to your character. 

Of course, Bryce and Poser are just the 
tip of the iceberg. Once you start to 
master the techniques involved, you 
can move on to applications like 
Cinema 4D XL 7(£1395 from [w] 
www.maxoncomputer.co.uk). This is an 
incredibly powerful, yet relatively 
easy-to-use 3D tool that provides a 
high-end feature-set. Within Cinema 
4D you can model using sub-division 
surfaces (breaking apart surfaces to 
form more surfaces) NURBS curves 
and polygons. These are terms you'll 
discover as you delve into the world of 
3D design and animation. 

The same sort of tools are present in 
one of the industry's leading 3D 
packages, Alias|Wavefront’s Maya 
(£1702 from [w] www.aliaswavefront. 


com. This application, used on many 
Hollywood productions, is probably the 
most powerful app out there. It has a 
top-class dynamics system (capable of 
simulating fire, water and other natural 
phenomenon) and great character 
animation tools. Being a Maya 
animator is certainly something to 
aspire to. The great news is, there's a 
Personal Learning Edition available for 
free. You can't use it for commercial 
use, but it’s great to learn with. 

On the subject of Hollywood 
productions, have you ever wondered 
how studios integrate 3D special 
effects with live action footage? 

Read on... 


DV revolution 


The art of combining 3D models and 
2D video footage is known as 
compositing. In fact, the art of 
combining any two images to create a 
new one (still or moving) can be 
referred to as compositing. The art of 
combining 3D models and 2D video 
footage is a tricky and time-consuming 
process. You must use keying (the 
process of removing parts of the image 
you don't want) and Alpha channels 
(these are usually generated by the 3D 
package when your 3D model or 
animation is rendered). In most cases, 
you cannot import 3D files directly 
into compositing and effects 
applications. Therefore, you must 
render your animation from a 3D 
application and then bring it into your 
compositing application as a movie 
file. You can then create masks to block 
out areas of the 3D footage you don't 
want and adjust lighting and so on to 


Adobe After Effects is an excellent motion graphics and compositing tool. Using a timeline-based 
approach, the package is fairly easy to get to grips with. 
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make sure the 3D animation fits in 
with the background video footage. 
This is tricky and takes a lot of practice. 

In terms of compositing and effects 
tools, there two main applications: 
Adobe After Effects and Discreet 
combustion. The latter is very 
expensive at well over £2000, yet 
integrates well with 3ds max, whereas 
After Effects is £617 The former is an 
industry standard and contains a wide 
range of tools for compositing and 
superimposing 3D footage onto 2D 
video, and has a number of filters for 
painting on digital video footage. 

And digital video has truly arrived. 
The likes of Ulead’s VideoStudio (£49 
from [w] www.ulead.com) and MGI’s 

VideoWave (£80 from [w] www.mgisoft. 
com) provide a fantastic window into 
digital video. These two packages are 
budget NLEs or Non-Linear Editors. 
These are basically applications that 
enable you to edit, re-edit and 
assemble and reassemble footage ona 
timeline. NLE applications provide 
more control over traditional video tape 
editing, which has to be edited 
sequentially from beginning to end. 

With digital video camcorders 
constantly coming down in price, and 
software coming in as cheap as £79, 
almost anyone can be a filmmaker. You 
can capture your footage from your 
camcorder directly onto your computer 
and begin editing immediately. 

Once you've become familiar with 
the techniques involved in non-linear 
editing, you can move to the more 
high-end and expensive packages such 
as Adobe Premiere (£480 from [w] 
www.adobe.co.uk) and Apple Final Cut 
Pro 3(£829 from [w] www.apple.com). 
The latter is quickly gaining ground on 
Premiere (Premiere used to be the 
more popular NLE by a long way) 
providing an intuitive and extremely 
powerful feature-set. Unfortunately, it’s 
Mac only. But PC users still have a wide 
choice of editing applications from 
Adobe and the likes of Pinnacle ([w] 
www.pinnaclesys.com) and Media 100 
([w] www.medial00.com). 

Digital video is truly an awe- 
inspiring medium. You can create your 
own short film, complete with titles and 
special effects in even the cheapest of 
applications, making these times very 
exciting for all those potential 
Speilbergs out there! 


Creativity rules OK 


Whatever your chosen medium, the 
idea is to be creative. Software exists 
as tools to execute a certain job. It’s no 
good knowing the software if you 
haven't any idea how to use it creatively. 


Get started 


Asound knowledge of the software 
involved will help you in your quest to 
become a digital creative professional, 
but ideas are far more important. 
Come up with an idea, and then use 
whatever software you need to 
accomplish your vision — let your 


imagination guide the way and the 
software knowledge will fall into place. 
And if you don't succeed the first time 
you try, be patient, because digital art is 
here to stay and you can be part of this 
artistic revolution with a little 
inspiration and hard work. EES 


# Intuos 2 PC/Mac £varies Wacom 


Peripherals are important... 


The essential hardware you'll need to start creating digital art... 
Peripherals enable you to do things a PC or Mac alone just can't do. Whether it's a scanner — enabling you to scan in the texture of a leaf you 
found in the park, or a graphics tablet enabling you to paint strokes into Photoshop more naturally, hardware can be as important as software 


when it comes to digital art. Here's our guide to what you need and what you should buy... 


Product Platform Price © Company Contact 


Scanners A good scanner is essential for bringing hand-drawn and textural elements into yourimage-editor 


Perfection 2450 Photo PC/Mac £299 Epson www.epson.co.uk 


The Epson Perfection 2450 Photo is capable of scanning at 2400x4800 dpi. Extremely fast, hooks up via FireWire or USB 2.0, and 
capable of scanning negatives up to 4x9-inches, this is a terrific value scanner for the creative pro on a budget. 


Microtek ScanMaker 8700 PC/Mac £800 Microtek www.microtek.com 


The ScanMaker 8700 carries on Microtek's fine tradition of producing top-quality A4 scanners with truly professional features. 
Glassless transparency scanning coupled with excellent scanning speed and FireWire connectivity add up to one classy device. It’s 
expensive, though... 


Graphics tablets Providing an intuitive way of painting into Photoshop or Painter, a graphics tablet is essential 


Wwww.wacom-europe.com 


acom is the manufacturer of choice for graphics tablet users, and the Intuos 2 is its flagship product. It comes with a cordless, 
battery-free pen and mouse, the pen having1024 levels of pressure-sensitivity. Sizes range from A6 to A3 — the A6 tablet being an 
ideal starting tool. 


Storage Essential for holding space for all your precious digital files 


LaCie Studio Drive PC/Mac £410 LaCie www.lacie.co.uk 


The Studio Drive from LaCie offers a massive 120GB of portable storage. What's more, the drives are shaped in such a way that they 
can be stacked up if the need demands. This is an impressive way to add a substantial amount of extra storage to your computer at a 
relatively low cost. 


lomega Zip 250 PC/Mac £172 lomega www.iomega.co.uk 


he Zip drive has always been an essential item on the inventory of any designer or design house. The latest incarnation of the 250 is 
slicker, faster (thanks to an optional FireWire adaptor) and smaller. Overall, the flexibility and universal use of Zip media make this an 
essential storage device. 


Printer Proof your work for accurate colour before sending it off to clients 


Canon $9000 PC/Mac £379 Canon www.canon.co.uk 


The Canon $9000's performance is something of a leap forward. It is the fastest inkjet we've ever seen, and it’s ideal for a busy user 
who has to produce frequent proofs or finished output. What's more, it offers full-bleed (edge-to-edge) printing and is fantastic value 
for money at under £400. 


“i HP DesignJet 20PS PC/Mac £1236 Hewlett-Packard = www.hp.com 


The DesignJet 20PS offers superb quality, a six-colour print process, 2400x1200dpi resolution and a print speed of four minutes for a 
best-quality image. It’s expensive, but it’s as close to a professional proofer that you are going to get. 


Monitor a good (and large) display is crucial for your day-to-day design work 


Sony E530 PC/Mac £645 Sony www.sony-cp.com 


With great styling, intuitive menu controls and a top-quality picture, the Sony E530 proves to be great value for money. In short, if 
you need a 21-incher and want the gorgeous display quality that a Trinitron tube has to offer — at as little cost to you as possible - the 
£530 is definitely one to consider. 


NEC FE1250+ PC/Mac £575 NEC www.nec-mitsubishi.com 


Sacrificing such refinements as a USB hub and multiple inputs, the NEC FE1250+ nevertheless proves to be an excellent monitor for 
those after a large screen for little cash. Cleanly styled, with simple, ergonomic controls and a perfectly flat Mitsubishi tube, this 
display is a bargain. 
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Creating digital artwork 


Let's begin by learning some of the basic skills that are required to create stunning 
artwork using Photoshop, Painter and Illustrator... 


ere at Computer Arts Special, we believe 

that Photoshop is the single most important 

application in the entire digital art industry. 

If you aspire to doing professional-quality 
work, nothing will be more beneficial to you than a 
good understanding of Photoshop to compliment your 
own creativity. 

In this first section of the magazine, we're going to 
look at Photoshop from two angles. Firstly, we'll take 
advantage of its powers as an image composition tool, 
with commercial artist Jacey showing you how to use 


Pr Illustrating basics in Photoshop 7 


og Retouching basics in Photoshop 7 


34) Getting started with Painter 7 


38 Getting started with Illustrator 10 
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Photoshop to create a fascinating illustration. Second, 
we'll hark back to Photoshop’s original purpose — not 
art but photo manipulation — by looking at how it’s 
used to retouch photographs. 

Photoshop is not the only way to create great 
artwork. We've included a tutorial on using the vector 
art capabilities of /llustrator. The artist Domanic Li will 
show you how it’s done. The great thing about vector 
artwork is that it’s so easy to both resize and edit. 
Rather than relying on dots of colour (pixels), vectors 
are based on pure maths. Making something bigger or 


changing a colour is as easy as changing a setting, 
dragging an object’s handle or clicking on a palette. 

Finally, we're certain that many of you would love to 
be able to paint, but can't find the time or don't have the 
patience to practice the skills. Painting on your Mac or 
PC is easy with an application like Painter, and a lot 
less messy too. What's more, the program is so flexible 
and intuitive you can paint images fitting into the style 
of any artistic movement. One minute watercolour, the 
next cubism and on to abstract impressionism — all 
the media you need are included. EE 
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ven with a basic 
knowledge of 
Photoshop 7 you 
have the ability to 
create complex-looking 
illustrations from a few key 
elements. By introducing the 
process of duplicating layers 
and elements, we can have 
imagery that looks like it took 
days to create. In this tutorial, 
we are going to focus on getting 
to grips with the Layers palette, 
| simple compositing, looking at 
_ afew of the basic tools and the 
"new Brush palette. 


Illustrating 
\ basics in 


Even beginners can create complex 
compositions with just a few elements 
using Photoshop. We show you how... 


Even the more experienced of users 
may find parts of the process insightful 
to the workings of a commercial 
illustrator. When working as a 
commercial illustrator, time can be tight, 
and the less you have the more it 
becomes a luxury. To create an 
illustration similar to ours should take no 
longer than spending a day to two days 
producing it, from being commissioned 
up to the point of emailing the client the 
signed off piece. 

So, explore and modify as you 
progress through this tutorial, because 
that’s what makes the strong foundations 
of an interesting digital artist. » 
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Part 1: Background building 


As with traditional painting, we start by building the background then adding foreground elements. 
By a simple process of duplicating we will make the illustration appear more complex than it really is... 


Details 


You can buy the full version of 
Photoshop 7 for £528 from [w] 
www.adobe.co.uk. You can also 
download the demo of version 6 
from [w] www.adobe.com/ 
support/downloads. We couldn't 
fit the demo of Photoshop on the 
CD with this issue, However, if 
you would like a demo with which 
to follow the tutorial, Adobe has 
demo CDs to send tothe first 
5000 Computer Arts Special 
readers who contact the 
company. Visit [w] www.adobe. 
co.uk/tryouted and fill in the 
Web form if you would like one. 


Size matters 


When working for the 
commercial sector as an 
illustrator, the client will specify 
the size of the illustration which 
willusually include bleed of a 
couple of mm. You will also work 
in CMYK rather than RGB like 
this tutorial, as most printing 
processes are in CMYK. The 
resolution is normally 300dpi. 


CD elements 


The 3D elements included on 
this CD forthe tutorial were 
created in Poser4 and Cinema 
4D, but if you're a regular reader 
you may have the free copy of 
Poser 3 that came with Computer 
Arts issue 67 So have a go at 
creating your own figures and 3D 
elements and replace the 
elements from this tutorial with 


your own. 


Textured objects 


If you're new to Photoshop and 
digital art, try finding interesting 
textured objects in the real world 
and scanning them into be used 
as a background. Finding a 
texture can save quite a bit of 
time in terms of trying to create 


something in Photoshop. 
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Let's start by opening a new document 

window within Photoshop 7 to work in. Go to 
File>New and name the document mindseye.psd. 
The preset size should be Custom, enabling us to 
enter our preferred size. Set the image size to 
49cm wide and 30cm high. You may need to select 
the drop-down boxes to change the measurement 
system. Resolution should be set at 150 pixels/ 
inch, Mode will be RGB and Content should be set 
to white. 


4 | Still in the postcard document go to Edit> 
Copy. Switch to the mindseye.psd document 
window by clicking the top of its window and go to 
Edit>Paste — this will paste the postcard scan in to 
the middle of this document window. It will be 
shown as a new layer in the Layers palette. If this 
palette is not showing go to Window>Layers. Move 
your pointer over New Layer in the Layers palette 
and double-click it to make it selectable and rename 
the layer to postcard. Now select the Move tool 
from the Tool palette or press V on your keyboard, 
move the pointer to the mindseye document and 
move the postcard to the left edge of the 
document. See above image for example. 


Open the bigring. jpg file from the CD — this 3D 
object has been rendered with a separate 
Alpha channel. So go to Select>Load Selection. The 

Load Selection dialog box should show bigring.jpg 

and the channel Alpha‘ and only the button for 
Operation New Selection should be selected. Click 
OK. Now the object is selected and, as before with 
the postcard copy, paste it in the mindseye.psd 
document window. 
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Now open the postcard.jpg from the CD by 
going to File>Open and locate it within the 
Tutorial\Illustrating folder. Once opened you will 
see the scan of the postcard is a bit flat. To give it 
more impact, go to Image>Adjustment>Hue/ 
Saturation. The Hue/Saturation dialog box opens. 
Make sure Preview is selected and Colourise is not. 
Then moving the Saturation slider to the right, we 
will increase it to about +77. This should give the 
card a strong sepia look. Once that's done click OK. 


8 ‘| Now we are going to create a drop shadow for 
the postcard to give the impression of depth. 
By selecting and holding down the postcard layer in 
the Layers palette, we can drag it down to the 
bottom of the palette and let go over the second 
icon in from the right — the Create New icon. This 
will duplicate the layer. Now, drag the layer which 
has just been created (postcard copy) and place it 
below the original postcard layer and rename this 
copy postcard shadow. Now, still using the Move 
tool, we will move the layer in the document 
window left and down slightly to give it an offset 
appearance like in the example above. 


8 | Make sure this new layer is at the top of the 
Layers palette by dragging it up and renaming 
the layer bigring, then go to Edit>Transform>Scale. 
The object will now have a bounding box around it. 
Select and hold one of the corners and drag it 
diagonally inwards while holding down the Shift 
key. This will constrain the object's shape and stop it 
from becoming distorted. Now, let go and place 
your pointer in the centre of the bounding box and 
drag the object to the required position like in the 
above image, then double-click it to execute the 
shape and position adjustments 


In PS7 there are many ways to select elements 

that then can be copied and pasted — one of 
the most common is the Wand tool. Select this tool, 
which is the second tool on the right of the Tool 
palette. Make sure the Tolerance in the tool options 
bar at the top of the screen is showing 32 and that 
the Anti Alias and Contiguous buttons are checked. 
Move the wand into the white background areas of 
the postcard scan and select one of them. Now 
move into the remaining white areas and hold down 
the Shift key and select the remaining white areas. 
Now that all the white background is selected, go to 
Select>Inverse and this will now select the postcard 
by inversing the selection. 


G To create the shadow, go to the Layers palette 
and lock the transparency by selecting the first 
icon on the left of the Lock icons. A small padlock 
icon should appear next to the layer's name. To fill 
the postcard black, make sure your foreground 
colour is black. If not, go to Windows>Swatches and 
click the colour black. Now go to Edit>Fill, the dialog 
box should have Blending Mode set at Normal and 
Opacity at 100 per cent, then click OK. Deselect the 
Transparency Lock icon in the Layers palette and set 
the Layer Mode to Hardlight, this is in the drop- 
down button in the top of the Layers palette. Now 
go to Filter>Blur>Gaussian Blur and set the Radius 
to about 58.7 pixels and click OK. 


9 | To apply contrast to the bigring layer, go to 
Image>Adjustments>Levels. In this dialog box 
put in the three boxes at the top. Starting with the 
left, put O in the first box, put 1.23 in the middle and 
168 in the last box. Click OK. Repeat the process as 
with the postcard to create a drop shadow and call 
the layer bigringshadow. Then, paste another 
original bigring into the document, place it below 
the bigringshadow, adjust the levels, scale it down 
and position it slightly larger behind the original 
bigring layer. Set the Layer Mode to Hardlight and 
Opacity to 39 per cent. If unsure of any of this stage 
look on the CD for the mindseye1.psd image. 


Part 2: Creating a selection 


This next section we will look at using the Paths tool to create an accurate selection 
and use the Brush palette to select a Burn tool brush... 


Screen displays 


While working, try flicking 
through the screen display 
modes. These can be accessed at 
the bottom of the Tool palette, 
three small window looking 
icons. If you click the right one it 
willturn the area behind the 
image black and remove all 
unwanted desktop windows etc. 
Then if you press the Tab key on 
your keyboard it will hide the 
option bar and any palettes. This 
is great for viewing your artwork 
without any distractions. 


Zoom and Grab 


Double-click the Zoom tool on 
the Tools palette to get a true 
representation of the image at 
100 per cent, which is very 
helpful for checking and cleaning 
up your illustration. Then if you 
double-click the Grab tool this 
will set the document window to 
fit within in your display, which is 
great for quickly seeing how your 
illustration is coming on. 


Individual working 


There are no set rules to how you 
should work in Photoshop. This 
tutorial is only a guide and there 
may be a different process that 
suits you better. Explore all the 
possibilities of selecting 
elements within a file and see 


which is easier for you. 


i] Now using the Wand tool with the Tolerance 
still set at 32, select the inner space of the 
bigring object, making sure the bigring layer is 
selected in the Layers palette. Once you have 
created the selection, create a new layer by selecting 
the Create New icon again at the bottom of the 
Layers palette. Then, call the new layer redcircle and 
fill the selection with a red colour from the swatch. 


es! 
g We want the figure to look as if he is coming 
out of the ring so, using the Magnify tool on 
the Tool palette at the bottom right, drag over his 
groin area to zoom in. Now switch off the 
manshadow layer by clicking the eye icon in the 
manshadow layer in the Layers palette. Then select 
the man layer and set the Opacity to 76 per cent at 
the top of the Layers palette. We can now partially 
see through the man to the bigring layer. 


We need to add a bit of a shadow on his 

stomach. With the man layer selected switch 
on the Transparency Lock and select the Burn tool, 
or press the O key. Press the Brush Palette tab at he 
top of the option bar, or go to Window>Brushes. 
Click the Brush Preset and select brush 65, then click 
into the man's stomach area. By having 
Transparency locked we can burn the lower part of 
his stomach area to give the impression of a 
shadow, and the tool will only burn within the area 
of the man. To make the burn darker, reclick and 
apply over the already burned area. To zoom back 
out of the document to see the whole image, 
double-click the Grab tool at the bottom of the Tool 
palette, the one that looks like a hand. 


2] Open man.jpg from the CD. Create a selection 
from the Alpha channel again and copy and 
paste into the mindseye.psd document window. 
Name the layer man and make sure it's at the top of 
the Layers palette. We will now scale him to look 
like the above picture and place him over the 
bigring. Now, adjust the levels of the man to 0, 0.84 
and 168 respectively. Click OK. 


We will now use the Pen tool to create a 

detailed selection around the area we want to 
delete, make sure the Paths palette is visible, use 
Window>Paths or select the Paths tab from behind 
the Layers palette tab. Now select the Pen tool from 
the Tool palette or press P on your keyboard. Move 
the pointer and click the mouse to create a point. 
Do this then move along and do this again until you 
have created a shape like the above image. With 
your last click join the first and last point together. 
Now, if you look at the Paths palette, you should 
see a path called workpath, double-click it and 
rename the path Groin. 


8 | Open the file hand1 jpg from the CD and use 
the Alpha channel to create a selection. Paste 
the hand into mindseye.psd document window. 
Call the layer grabhand1 and adjust the levels and 
colour balance to suit the illustration. Move the 
grabhand1 layer in the Layers palette to below the 
bigring layer. Using what we have done previously, 
scale it down in size but don't double-click just yet 
as we will want to rotate it. Go to Edit>Transform> 
Rotate and rotate it to the position like it is in above. 
Use the Lasso tool to draw a selection around the 
unwanted wrist area then delete it. You may have to 
zoom in again to do this. 


& The figure is looking a bit pink and needs to fit 
in with the colour palette of the rest of the 
illustration. So go to Image>Adjustments>Colour 
Balance. In the Colour Balance dialog box, set the 
colour levels of the midtones to +21, +39 and -24 
and then click the Highlights button at the bottom 
and adjust the boxes to +2, -7 and 0. Click OK. 
Create a drop shadow for him, but make the pixel 
blur in the Gaussian filter around 35 pixels. Once 
you have done that call it manshadow and then 
select the man layer. 


‘ 
G Select the man layer in the Layers palette. At 
the bottom of the Paths palette there is a 
small icon third in from the left called the Make 
Selection icon. Click this and it will turn the path you 
have created into a selection. Now we can delete 
this unwanted part by pressing the Delete key on 
the keyboard. Now switch to the shadow layer for 
the man layer and delete the unwanted shadow 
that is present. Then go to Select>Deselect to get rid 
of the selection. 


Now duplicate grabhand1 in the Layers palette 

and move and rotate this into the next 
position. Repeat this step another 11 times until all 
the hands are in place. With the last duplicated 
grabhand layer, we will use the link chain in the 
Layers palette to link all the grabhand layers 
together. To do this, click the blank square next to 
the eye icon in the Layers palette for all the 
grabhand layers. Then go to Layer>Merge linked to 
merge all the hands together in one layer. Then 
create a drop shadow for this layer as well. Refer to 
mindseye2.psd if you're having trouble. > 
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Part 3: Combining elements 


In this section we look at combining elements by using a simple process of using the eraser, 
and how a few primitive 3D shapes can make a whole network of realistic looking rusty pipes... 


Mode changes 


Layer mode in the Layers palette 
is one of the great things about 
Photoshop. You can create 
extraordinary results by 
changing the mode from Normal 


to, say, Screen. 


The powerful Pen 


Explore the Pen tool and how 
to draw curves with it by using 
the convert point. This is great 
for generating vector art within 
Photoshop, as well as being 
able to create clean and 


precise selections. 
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a Open helmet.jpg from the CD and create a 
selection from the Alpha channel. Copy and 
paste it in to the mindseye.psd document window. 
Call the layer helmet and place at the top of the 
Layers palette and then scale and position over the 
man’s head. 


Open pipes.jpg from the Tutorial\Illustrating 

folder on the CD and create about four to 
eight pipes like the main opening illustration. Place 
some on top of the helmet and some behind. Merge 
all the top pipes together and call the merged layer 
pipestop, and do the same for the pipes behind the 
helmet and call the layer pipesbehind. Again, make 
a drop shadow for them 


Now open eyering.psd and you will see, when 

opened, that this is a layer with a transparent 
background. Another way of copying documents 
into other documents is a grab and drop procedure 
with the Layers palette. Click and hold down the 
eyering layer in the Layers palette and then drag the 
layer across to the document window of the 
mindseye.psd. 


Res 
ia The pipe coming down from the helmet is a 
bit too long, so we will select part of it with 
the Lasso tool, copy the selection then delete the 
part we have just selected. Now deselect and paste 
the part you have just copied. This will now be ina 
new layer. 


r. 


5 | At the end of all the visible pipe ends, place a 
cuff. This can be taken from one of the pipes 
from the pipes.jpg file. Use the Pen tool to select, 
then copy and paste the element into the 
mindseye.psd document window and place at the 
ends of the pipes. Merge all cuff layers together. Call 
the layer cuffs 


8 | Position the eyering layer below the cuffs 
layer if it's not already done. Then position, 
scale and duplicate the eyering layer to the other 
hands as in the above picture. Merge these eyering 
layers together. 


3 | Move the newly-pasted pipe into the above 
position. Now select the eraser from the Tools 
palette or press letter E on your keyboard. Then go 
to the Brush palette and select the preset brush 35. 
Now using the eraser, erase part of the pipe so it 
blends in to the lower pipe layer, you may also want 
to erase the lower layer. Link the helmet layer and 
the new layer together and merge them. Now 
create a drop shadow for this layer. 


G Now open hand2. jpg and, using a familiar 
procedure, paste the hand into the 
mindseye.psd document window. Make sure it’s 
below the cuff layer then scale, move and rotate it in 
position so it looks like the hand is part of the pipe. 
Once you have positioned the hands under the 
cuffs, merge all the hands and cuff layers together 
and make a drop shadow. 


9 | From what we have done previously with 
deleting part of the main figure's stomach, we 
will now delete part of the thumbs to give the 
impression that the cuff/hands layers are holding 
the eyerings. Do this to all of them, then create a 
faint drop shadow for the eyerings. 


Part 4: The Paste Into command 


Here we will look at the Paste Into command and have a good look at the dynamic settings 
within the Brush palette which will help us simulate steam with the single stroke of a brush... 


To the next level 


Levels is a great tool in 
Photoshop. Once you have 
completed the tutorial, see if you 
can correct the levels even more. 
Also, try adjusting the hue and 
saturation of the illustration to 
see what interesting results you 
can get. 


The Type tool 


One area we have not covered 
here is the Type tool. Try to 
explore this tool and its options 
and effects. Try putting the words 
ON and OFF on the figure’s 
helmet where the switch is, and 
then use the Layer modes to 
blend it with the helmet's texture 


Photoshop, Painter, 
and Illustrator 
Side-by-Side 

(2nd Edition) 


Wendy Crumpler 
£36.99 

Sybex 

ISBN: 0782129234 


This completely revised and 
updated edition offers anyone 
needing to learn each of these 
programs the chance use their 
similar interfaces to their best 
advantage. Divided into three 
sections, the book begins with a 
basic overview of each 
application before moving onto 
where this book really comes 
into its own — illustrating side- 
by-side each application's key 
tools and commands. 
Reminiscent of the Wow! series, 
each chapter is concluded with 
example artwork created with 
two or more of these 
applications, enabling you to see 
first-hand what can be achieved. 
A unique book that allows fast- 
track learning, and illustrates 
how these three packages can be 
successful integrated together. 


aul Open eye. jpg and create a selection from the 
Alpha channel and copy it. Then go to the 
mindseye.psd document window and use the magic 
wand to select the inner part of one of the eyerings. 
Now go to Edit>Paste Into and this will paste the 
eyeball into the selection. Now we can use 
Scale>Transform to reduce the size of the eye within 
the eyering area. 


4 | Open hand3.jpg and, using the same 
procedure as before, place numerous hands 
around the illustration at the end of the eyering 
springs. See above or main illustration to see how it 
should look. Don't forget to add the shadow. 


Select the Scattering button and tick Both Axis 
and set to 215 per cent, Control off, Count 4, 
set Count Jitter 26 per cent and Control off. At this 
stage you may want to test the brush on a separate 
document window with a dark background. 


Repeat the previous step for the remaining 
eyerings. To reduce the file size of the 
mindseye document merge the eyeballs together. 


5 | Open the cogs.jpg file and place numerous 
cogs just above the postcard layer. This is quite 
a straightforward process. You may wish to make it 
more complex and individual by creating various 
sizes, or even try making selections on the teeth of 
the cogs and applying some blur to give the 
impression of movement. 


Noise button. 


8 | Select and click on Other Dynamics in the 
Brush palette and set the Opacity Jitter to 44 
per cent, Control off and Flow Jitter to 89 per cent, 
and again Control off. Then select and click the 


Using the file eyeball.jpg place two small 

eyeballs in the palm of the man's hands. Using 
the procedures we have already gone through cut in 
to the eyeballs to show some of the fingers to give 
the impression he is holding the eyes. Then give the 
eyeballs a very soft drop shadow. 


G We will want to add some steam over parts of 
the illustration, such as the pipes and the man's 
helmet. So create a new layer at the top of the 
Layers palette and call it Steam. Select the Brush tool 
and we will now create a brush to simulate steam. 
Open the Brush palette and select preset 65 again. 
Click on and select the Shape Dynamics and, within 
it, set the Size Jitter to 36 per cent, Control off, 
Angle Jitter to 22 per cent, Control off, Roundness 
Jitter to 53 per cent, Control off and Minimum 
Roundness to 76 per cent. 


Ss Y B25 
9 | In the Tool palette make the foreground colour 
white and set the Opacity of the brush to 80 

per cent in the options bar at the top. In the selected 
steam layer on the Layers palette start to paint in 
steam. To make areas of the steam look more dense, 
reapply over the top. If you have any problems with 
these stages have, look at mindseye4.psd. EEE 
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‘ihput 


Retouching basics 


mrs rluS 


in Photoshop 7 


Learn the basics of colour correction and 
digital imaging using Photoshop 7... 


re you curious about image- 
editing? Or would you like a 
refresher course in things 
you may have tried to teach 
yourself? Or maybe you saw a co-worker 
or friend clicking away in the world’s 
leading image-editing program and 
thought, “Hey, | could do that too.” 

This tutorial will get you started in the 
most basic areas of photo retouching. 
We'll walk you through the essentials of 
colour correction, and give you step-by- 


step instructions on how to remove 
wrinkles from faces and tourists from 
scenic shots. For those of you interested 
in altering the perspective of the world 
around you, we'll touch on that too. 

So if you just picked up a digital 
camera or flatbed scanner and would 
like to improve your photos, this tutorial 
is essential. And for those who have 
admired the Photoshop from afar but 
didn't know where to start, turn the page 
and start at step number one. 


Photoshop 6 ImageReady 3 H.O.T 


(Hands-On-Training) 


Jan Kabili (Developed by Lynda Weinman) 
Peachpit Press 

£3799 

ISBN: 020172796X 


Although we've used Photoshop 7 for this tutorial, this 
manual covering version 6 remains relevant and allows you 
to get your hands dirty from page one. Professionally 
presented in full-colour throughout, 15 chapters guide you 
through the intricacies of the Photoshop interface and 

then seamlessly onto /mageReady. Each chapter is a 
concise tutorial in its own right, covering some 
complex techniques, but you never feel 
intimidated or out of your depth. When a textual 
explanation is simply not clear enough, 
QuickTime movies explain a technique with 
superb clarity. Highly recommended for all 
beginners, this book is an excellent and 
innovative tool to learning Photoshop and its 


Web graphics companion ImageReady. 
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ULOINIA 


Part 1: Sharpening 


Almost every raw scan could use a little sharpening. We'll show you how to use the Unsharp Mask filter... 


Details 


You can buy the full version of 
Photoshop 7 for £528 from [w] 
www.adobe.co.uk. You can also 
download the demo of version 6 
from [w] www.adobe.com/ 
support/downloads. We couldn't 
fit the demo of Photoshop on the 
CD with this issue. However, if 
you would like a demo with which 
to follow the tutorial, Adobe has 
demo CDs to send to the first 
5000 Computer Arts Special 
readers who contact the 
company. Visit [w] www.adobe. 
co.uk/tryouted and fillin the 
Web form if you would like one. 


BA When a film transparency is scanned it tends 
to become a little softer as you will notice 
here, a little of the original sharpness is lost. Open 
the file Portrait.psd from the Tutorial\Retouching 
folder on the CD. We will use the Unsharp Mask 
filter to add some more sharpness. From the menu 
choose Filter>Sharpen>Unsharp Mask. 


The Amount slider determines how much the 

contrast of the pixels are increased. The Radius 
slider determines how many pixels around the edge 
pixels your sharpening will affect. The Threshold 
slider will determine how different the pixels must 
be from the rest of the image before the filter 
considers them edge pixels and sharpens them. 


In this instance, leave the threshold set at O so 

that it affects all of the pixels in the image. Try 
experimenting with different combinations of the 
other two sliders. As you are adjusting the sliders 
keep an eye on the image to see if you are defining 
the edges too much, you don't want to over 
sharpen. We achieved a very good result by setting 
the Radius to 200 and the Amount to 1.0. 


Part 2: Levels 


Perform essential colour adjustments to the image and individual channels using the Levels options... 


Measuring ink 


You can click on the image using 
the Eyedropper tool to measure 
the ink amounts. The ink amounts 
will be displayed in the info 
palette. To set up what 
information is being displayed in 
the info palette, click on the 
arrow in the upper-right and 
choose Palette Options. There 
are two different colour readouts 
We set the first to total ink, This 
adds up the ink in the different 
channels and tells you what 
percentage of total ink is in the 
section of the image you are 
measuring. We set the second 
readout to CMYK since our 
image is destined for print. Here 
you will see the ink coverage for 


the individual channels. 


Selective colour 


Selective colour correction is 
based on the amount of ink used 
to create each primary colour. 
You can modify the amount of 
process inks which make up each 
primary colour selectively. If you 
have an image of a blue sky with 
green grass, and you think the 
grass looks perfect but the sky 
lacks cyan, you canincrease the 
process cyan ink inthe blue 
component (selectively) without 
affecting the amount of cyan in 


the green component (the grass). 
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1 | From the menu choose Image>Adjustments> 
Levels to access the Levels dialog box. The 
input levels are represented by a histogram. The 
histogram can then be adjusted by entering numeric 
values in the text boxes, or by simply adjusting 

the sliders underneath the histogram. You should 
make sure that preview is enabled in the bottom 
right corner. 


4 | What we need to do now is brighten the 
highlights in the image. The slider on the far 
right controls the highlights. Drag it to the left to 
begin lightening the highlights in the image, stop 
when it reaches around 236. You will notice as you 
move the highlight or shadow sliders that the mid- 
tones slider will move automatically to correspond 
to your adjustments. 


(TATA) 


The middle slider controls the midtones, that is 

where we'll begin our adjustments. Overall, 
the image looks a little too dark, so drag the middle 
slider to the left to lighten the midtones. You will see 
the on-screen image lighten as you drag the slider. 
You will also notice the number in the centre text 
box changing as you drag. Stop when the number 
reaches around 1.38. 


Now that we have adjusted the basic 

midtones, highlights, and shadows it's time to 
pay attention to the actual colour of the image. 
Visually, her skin looks a little too pink. But let's have 
a look at the actual ink amounts in the individual 
channels. By moving the mouse over the image with 
the Levels dialog open you will automatically have 
access to the Eyedropper tool. 


3 | Now that we have lightened the midtones, 
you'll notice that it has taken away some 
contrast from the image. To remedy this, let's start 
by darkening the shadows in the image. The 
shadows are controlled by the left slider under the 
histogram. Grab the left slider and start to move it to 
the right. Stop when you notice the number in the 
shadows text box reach around 28. 


6 | Click on an area of flesh in the image and have 
a look at what the info box says. If you check a 
few places you will notice that there is definitely 
more magenta in the image than there is yellow, 
giving the flesh its pinkish colour. Checking the info 
box is a good habit to get into, you never know 
when your monitor calibration may not be entirely 
accurate, but the numbers don't lie. 


From the Channel pop-up in the Levels dialog, 
choose the Magenta channel only. Notice that 
the histogram changes to only display the contents 
of the Magenta channel, any adjustments made to 
the sliders will only affect this channel. Select the 
midtones slider and drag it to the left until the 
midtones text box displays a number of about 1.10. 


8 | Now, just looking at the image we notice that 
dark areas look a little flat. So, firstly, switch 
the Channel pop-up to Black so that now you are 
working with the black channel only. Drag the 
Shadow slider to the right until the input level in the 
text box is at about 20. Notice how much more rich 
the dark areas become. 


g Select Cyan from the Channel pop-up. Drag 
the midtones slider to the left until the input 
level becomes 1.04, and drag the hilights slider to 
the left until the input level becomes 248. Click OK 
when you have finished. By reducing the cyan in the 
highlights and midtones we manage to make her 
skin appear a little lighter. Save the changes you 
have made, we'll come back to this image later on 


Part 3: Curves 


Curves, like Levels, will enable you to adjust tonal values of an image. 
But Curves aren't limited to the three variables: highlights, midtones, and shadows... 


Adjustment layers 


Another way to colour correct 
your images is to use Adjustment 
layers. One advantage is that you 
do not affect the original image, 
since your adjustments only 
appear when the layer is 
switched on. You can minimize 
effects by reducing the Opacity 
of the Adjustment layer, or create 
interesting effects by changing 
the Blending Mode. Also you can 
use a Layer Mask on your 
Adjustment layer. To create a new 
Adjustment layer select Layer> 
New Adjustment Layer from the 
menu, or from the create new fill 
or Adjustment layer icon at the 
bottom of the Layers palette. 


Panning/zooming 


When you are making 
adjustments and you have an 
open dilaog box like Levels or 
Curves, you can see your image 
in the background. But what 
about the parts of the image that 
are off screen or what about if 
you want to zoom in? Worry not, 
you do not have to close the 
dialog box to access the tools 
you need. You can access the 
Panning tool by holding down 
the Space bar. You can zoom in 
by holding down the Space bar 
and the Command key. You can 
zoom out by holding down the 
Space bar, the Command key 
and Option. All of these features 
are still available while your 
dialog box is open and you're 


making adjustments. 


ay Open the file stonehenge.psd from the cover 
CD. And from the menu select Image> 
Adjustments>Curves. The horizontal axis of the 
graph represents input levels (original intensity 
values of your image). The vertical axis represents 
the output levels (new colour values). By default, 
the input and output levels are identical resulting in 
a perfect 45-degree line. 


4 | Now we need to punch up some of the darker 
areas. Click on the curve midway between the 
centre point and the shadows point. This will add 
another point to the curve. Drag this point down 
and slightly to the right, you will notice the 
increased saturation that begins to occur in the 
tones between the midtones and the shadows. Stop 
dragging when input and output both read 65. 


a Click on middle of the the diagonal line, this 
will add a new point to your curve. Now, start 
to drag this curve upwards and to the left until the 
input text box reads around 111, and the output 
text box reads around 150. You will notice that this 
has a very similar effect to lightening the midtones 
of an image using Levels. 


G From the Channel pop-up select Cyan. Now 
we are just going to adjust the curve for the 
Cyan channel. Create a new point in the centre of 
the curve and drag it upwards and to the left to 
remove some of the blue colour from the stones 
(input 116/output 137). Add another point very 
close to the shadow point and drag it to the right a 
little to saturate some of the darker cyan areas 
(input 16/output 11). 


| Although this curve adjustment lightens the 
image overall, we lose some of the contrast in 
the image. The first thing we need to do is bring a 
little life to the highlights. Click on your curve 
approximately half way between the new point you 
made and the highlight point. This creates a new 
point, drag it slightly upwards and to the left until 
the input is 184 and the output is 226. 


G And finally, let's darken the shadows a little so 
that they don't look so flat. Select black from 
the Channel pop up and add a mid point to the 
curve. Drag it down and slightly over to the right 
(input 133/output 110). Click OK to apply the 
adjustments and save your changes. We'll be 
returning to this image as well. 
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Part 4: The Healing tool 


Photoshop 7 includes the magical new Healing tool. You won't believe how well this tool works! 


Curves pencil 


For those of you feeling brave 
there is an interesting tool in the 
Curves palette. Click on the 
pencil icon near the bottom. 
Using the pencil you can drawa 
new curve from scatch on the 
grid area. You can edit your new 
curves by clicking on the curves 
button to the left of the pencil 
This will add editable points 
along your new curve. Don't 
worry if you don't like what you've 
done. Hold down the Option/Alt 
key and watch the cancel button 
turn into a reset button. Clicking 
the reset button will return your 
curve and your image to the 


original state 


ice 


go Go back to the file Portrait.psd that you were 
working on earlier. Select the Healing tool 
from the toolbar (it looks like a bandage). In the tool 
options bar at the top, click on the brush icon and 
create a brush with a Size of 40 pixels, Hardness of 
85 per cent, and Spacing of 1 per cent. Leave the 
Mode set to Normal, and select Sampled as your 
source. Enable the Aligned function. 


The first area we want to work on is her 

hairline. There are some stray strands of hair 
around her temple. Hold down the Option/Alt key 
and click in a nice clear area nearby the stray bits of 
hair to define the sampling point. Now it's as simple 


as clicking and dragging in the image to heal desired 


areas. Start with the stray bits of hair. 


3 | As you click and drag you will notice how the 
sampled pixels are melded with the existing 
pixels when you release the mouse button. It's a 
good idea to define new and close sampling points 
often as you move around the image so that the 
effect looks seamless. Use the Healing tool 
wherever you think the image needs work, perhaps 
the wrinkles around her eyes and in her neck, 
various skin blemishes and unruly bits of hair, etc. 


Part 5: The clone stamp 


Although it has been with us for a while now, the Clone Stamp tool still proves 


quite useful, especially when removing tourists... 


Aligned 

When using the healing or the 
Clone Stamp tool a useful 
feature is the Aligned option, If 
you select Aligned in the tool 
options bar, the current sampling 
point or distance/angle ratio is 
preserved. Meaning that if you 
are cloning using a source point 
10mm to the right, as you move 
around the image the sampling 
point will always be 10mm to the 
right. If you deselect Aligned in 
the tool options bar, the sampled 
pixels are applied from the initial 


sampling point each time 


kad SE 
@ Open the stonehenge.psd file that you have 
been working on. Zoom in on the lower left 
corner and you'll notice that a pesky tourist has 
snuck into our beautiful photograph. Select the 
Clone Stamp tool from the toolbox, it is under the 
Healing tool. Choose the hard round 13 pixel brush 
from the Brush Presets in the tool options bar. 


2 | Leave the Opacity set at 100 per cent and 
enable the Aligned function in the tool options 
bar. Hold down Option/Alt and click in the image to 
define a source or sampling point. In this case 
option-click just to the left of the pesky tourist. And 
then click with the tool on the tourist. 


3 | You will notice that an exact replica of the area 
you sampled replaces the area you just clicked 
on. Go ahead and use this method to cover the 
entire tourist, don't be afraid to sample different 
areas as you move around slightly, and only use the 
Cloning tool up to the edge of the stone, we'd like 
to keep that bit. 


Part 6: The patch tool 


Like the Healing tool, the Patch tool will enable you to match texture, 
lighting, and shadow of sampled pixels to source pixels... 
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Select the Patch tool from the toolbar, and 

choose source from the tool options bar at the 
top of the screen. It is in the Healing tool pop-up 
menu. In the stonehenge.psd file you have been 
working on, draw a selection using the Patch tool 
around the pitted area in the large stone on the left. 


a Now, still using the Patch tool, simply drag the 


selected area upwards to a clearer area of the 
stone from which you want to sample and let it go. 
The original selected area is patched by the sampled 
pixels. Deselect (Command/Ctrl+D), and move 
down in the image a little, there are some smaller 
pitted areas under the one you just fixed. In the tool 
options bar, select destination instead of source. 


This time draw a selection around a clear area, 

approximately the same size and shape of the 
pitted area you want to fix. Drag that selection onto 
the pitted area that you want to fix and release it. 
With destination enabled, the newly selected area is 
patched with the originally selected pixels. 


Part 7: Hue/Saturation 


Here we use the Hue/Saturation sliders to make some basic colour adjustments to our butterfly... 


Saving adjustments 


When making adjustments to 
your images using levels or 
Selective Colour you will notice a 
Save button in the dialog box 
Clicking the Save button will 
create a file on your computer 
saving the settings you have 
created in the dialog box. Itis 
handy to save settings if you are 
going to do similar corrections to 
a number of images that were 
photographed under the same 
conditions. You can access your 
saved settings next time you 
open the dialog box by clicking 
the Load button. 


1 | Open the file butterfly.psd. From the menu 
choose Image>Adjustments>Hue/ Saturation. 
Leave the Edit pop-up set at Master so that we 
change all of the colours at once. You may also 
choose other specified colour ranges from this pop 
up. Things like reds, greens, yellows, etc. But leave it 
set at Master for this particular adjustment. 


= 


# The butterfly is looking a little too red, we'd 
like it to appear more golden in colour. So drag 
the Hue slider at the top towards the right until the 
value is approximately +15. The value displayed in 
the text box represents the number of degrees you 
have moved around the colour wheel from the 
pixel's original colour. 


is] Now, let's saturate the colour of the butterfly 
by dragging the Saturation slider to the right 
until its value is increased to +16. Although this has 
helped to saturate the colour, it has also brightened 
the image a little too much. To remedy this, drag the 
Lightness slider to the left to darken the image until 
the resulting value is -6. 


Part 8: Selective colour 


Perform some additional colour adjustments to the butterfly photo using the Selective Colour controls... 


1 | The butterfly is looking a little greenish and 
dirty still, so from the menu choose 
Image>Adjustments>Selective Colour. Choose 
yellows from the Colors pop-up menu to affect the 
yellow colours in the image only. Enable the 
Absolute method at the bottom of the dialog box 
for a more dramatic colour adjustment. 


ey Reduce the Cyan slider to about -10 to 
remove some cyan from the yellow areas. Now 
switch the colour set in the Colors pop-up to 
Neutrals, this will affect mainly the midtone neutral 
values throughout the entire image. Adjust the 
Cyan slider to about -5 and the Black slider to about 
—10 to remove some of the overall muddy feeling 
from the image. 


3 | Switch the Color pop-up to blacks and add 7 
per cent cyan and 8 per cent black to darken 
the blacks. Now, switch the Color pop-up to whites 
to brighten the whites in the background. Reduce 
the Cyan slider to -10 per cent, the Magenta slider 
to -16 per cent, the Yellow slider to -13 per cent, 
and the Black slider to -5 per cent. This gives you a 
good indication of the usefulness of selective colour. 


Part 9: Adjusting perspective 
This little trick will save you carrying around a step-ladder when you want to 
photograph things that are above your head... 


Healing 


You will notice as you use the 
Healing tool it melds areas that 
you paint with the pixels around 
them. This can sometimes be 
problematic if the area you want 
to heal has strong contrast at the 
edges, the melding could ruin 
your contrast. Try creating a 
selection that precisely follows 
the boundary created by the high 


contrast pixels. When you paint 


6 You will notice that as you pull the top-left 
point out to the left the top-right point 
reciprocates by moving equally in the opposite 
direction outwards to the right. This is the 
advantage of using the perspective transform 
function. Hit the Enter key when the image starts to 
look like you are viewing it straight on. 


Open the file church.psd. Choose Select>All 

from the menu (Command/Ctrl+A) to select 
the image. Choose Edit>Transform>Perspective 
from the menu. The image tapers towards the top 
because we are looking up at it. To remedy this grab 
the top-left corner point and pull it to the left. 


with the Healing tool inside the 
selection, the selection will 
prevent anything from bleeding 
in from the outside. 


3 | Although you have improved the perspective, 
the image appears too short and too wide. To 
remedy this choose Edit>Transform>Scale from the 
menu. Grab the centre point at the bottom of the 
bounding box and pull it downward until the image 
height starts to look more natural. Hit the Enter key 
when the image looks correct. FEES 
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Getting started 
with Painter 7 


Learn the basics and start painting digitally 
using Painter's leading natural media tools... 


ainter is the industry- 
standard digital paint 
application. Not only that, 
but plenty of digital artists 
find it fun and intuitive to use. What sets 
it apart is its plethora of fantastic and 
reliable natural media tools: there are 
chalks, oils, watercolours and tools to 
simulate almost any drawing or painting 
technique you can think of. 

Painter enables you to combine 
media that simply wouldn't be possible 
in the tactile realm, and the outcome can 
often be stunning. Add to that a never- 
ending supply of paint and multiple 


undos, and you can say goodbye to 
spending a fortune on art supplies, 
sharpening pencils, cleaning dirty 
paintbrushes, and messing up your 
scanner with bits of tacky paint. 

For those who are curious about 
working with Painter but don't know 
where to start, the following tutorial 
takes you through some of the basic 
features of this amazing natural media 
application. You will learn the basics 
of brush tools, layers, paper textures, 
and some other useful hints and tips 
that will introduce you to the digital 
painting discipline. 


Illustration: Derek Lea [w] www.dereklea.com 


Part 1: The workspace 


Before you start, you'll need to set up your workspace and locate some useful tools... 


Details 


To follow this tutorial, you'll need 
either the demo orfull version of 
Painter 7, available from 
procreate at [w] www.procreate. 
com, or by calling 0800 581 028. 
The full version costs £350, 


Turn to page 65 for a chance to 
win one of five copies of Painter 7 


Dinels peringh 


jas Ii 


Launch Painter 7 and choose File>New 

(Command/Ctrl+N). In the next dialog box, 
specify a canvas size and resolution to suit your 
needs. Leave the paper colour set to white. Next, 
under Picture Type, choose image instead of movie 
and click OK. This will give you a new white canvas 
to paint on. 


pect evte Saves Re en 
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Hide Tools 
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The only palettes you need for this tutorial are 

Tools, Brushes, Art Materials, Objects and 
Controls. You can show and hide palettes using the 
options under the Window menu. Make sure the 
necessary palettes are showing and the others are 
hidden. Now, click Colours from the Art Materials 
palette and Layers from the Objects palette to 
prepare the workspace. 


Grainy Variable Penal 
Dily Variable Penoil 
Sharp Pencil 
Thiok and Thin 


Pencil 


red Peno 


Open the drawer in the Brushes palette by 

clicking on it. This will reveal all the available 
brushes, in addition to the five displayed at the top 
of the palette. You can also access all the brushes 
using the Brush pop-up at the bottom-left of the 
palette. To the right of this is the Brush Variant 
pop-up, where you can choose different options 
for each selected brush. 


Part 2: The initial sketch 


Begin by sketching your idea, just like you would if you were painting traditionally... 


Setting grain 


The Grain slider controls how 
much paint or colour from a 
particular stroke penetrates into 
the paper texture. A low setting 
(slider to the left) reduces the 
penetration into the paper and, as 
aresult, displays more of the 
paper texture. As you move the 
slider to the right the colour 
penetrates further into the paper, 
so the stroke appears more solid 
and you see less of the 
underlying paper texture. Using 
various settings for grain can 
help give your digital paintings a 
more natural textured feeling. 


Controls:Brush 


a Select the Brush tool from the Tools palette. 
Next choose Pencils from the Brushes palette, 
and select 2b Pencil from the Brush Variant pop-up. 
In the Controls palette, increase the Size to 4.0 to 
make your pencil a little thicker, so that the strokes 
you draw will still be easy to view if you wish to 
zoom out. 
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Coser eed 


Use the ‘Create New Layers’ button at the 
bottom of the Layers section of the Objects 
palette to create a new layer. The button is to the 
left of the trashcan/Delete button. Double-click the 
layer name to access the Layer Attributes dialog. In 
this box, change the name of the layer to ‘sketch’. 


f 
Now, on this new layer, use the Pencil tool that 
you have specified to begin sketching. Lightly 
sketch the outline of the three primitive shapes. 
Don't be too picky at this stage; this layer is only a 
template for you to follow when painting. You will 
switch the layer on and off as needed by clicking on 
the layer's eye icon in the Layers section of the 
Objects palette. You can open the file part2.rif on 
the CD for reference now, if you like. 


Part 3: Painting 


Use Dry Media tools to paint in colours, and Liquid tools to blend the colours together... 


Keyboard shortcuts 


Ahandy keyboard shortcut is 
Command/Ctrl+H. This hides all 
the current palettes. Often when 
you are painting you will want to 
see only the canvas, so hiding the 
palettes is absolutely necessary. 
Use the same shortcut to reveal 
the palettes when you need them 
back. If you want to see even 
more of the canvas, Command/ 
Ctrl+M will hide the title bar and 
scrollbars for your current 
window and use this space for the 
image. Again, the same 
command returns the workspace 


to normal. 


Pt Create a new layer and name it ‘sphere’, using 
the same method you used with the sketch 
layer. Select the Dry Media tool from the Brushes 
palette and choose Artist Pastel Chalk from the 
Brush Variant pop-up. In the Colours section of the 
Art Materials palette select a reddish hue from the 
outer Hue Ring. Then choose a red colour from near 
the right point of the Saturation/Value triangle. 


Now, in the Controls palette, increase the Size 

of your Dry Media brush to around 55. Use 
this brush with your new colour on your new layer 
to paint the sphere a solid red colour. When you 
have a complete solid round shape enable the 
Preserve Transparency option in the Layers section 
of the Objects palette. 


Select a much darker colour from the 

Saturation/Value triangle in the Colours 
section of the Art Materials palette. Then, in the 
Controls palette, reduce the Opacity of the brush 
to 50 per cent. Begin painting a shaded area in the 
lower left of the sphere. Gently build up darker 
areas by painting over them a few times. Notice 
how using the Preserve Transparency function 
keeps you colouring within the lines. > 
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The drawer front 


Inthe Brushes palette, the five 
most recently used brushes 
appear at the top of the palette. 
This is called the drawer front. If 
you have a core set of brushes 
that you would like to remain in 
the drawer front, just click and 
hold an icon in the drawer front 
untila tiny green light appears 
underneath the icon. This light 
indicates that the icon is locked, 
and will remain in place in the 
drawer front until it is unlocked. 
To unlock an icon, click and hold 
it until the green light goes off. 
Painter enables you to lock only 
four out of the five icons in the 
drawer front; one item must 
remain unlocked to allow room 
for any item you might choose 
from the drawer. 


Custom palettes 


Create your own custom palette 
by simply dragging an item's icon 
out of its palette and on to the 
workspace. You can add other 
items to the palette by simply 
dragging them into it. Hold down 
the Command/Ctrl key to click 
and drag an icon inside your 
custom palette to move it around. 
Holding down the Option/Alt key 
while clicking on an icon in your 
custom palette deletes it from 
the palette. Custom palettes can 
be handy when you are using a 
few art materials repeatedly. For 
instance, in this tutorial it would 
be beneficial to create a custom 
palette containing the Dry Media 
brush, the Liquid brush and the 
two paper textures we have used. 


Painter 7 Wow! 


Cher Threinen-Pendarvis 
Peachpit Press 

£3799 

ISBN: 0201773627 


If you're new to Painter you 
simply must own this book. 
Exploring every facet of this 
complex program, each of the 12 
chapters is divided into a work 
zone where you learn the basic 
techniques of the tool, before 
moving onto step-by-step real- 
world tutorials. Hints and tips 
litter each chapter as does 
gallery artwork to show you 
Painter in action. 
Sumptuously produced in full 
colour, you will see how Painter 
can be used to its full advantage. 
The accompanying CD rounds off 
an impressive package with 
custom brushes, 
stock photographs 
and video clips. 
This is simply the 
best Painter manual 
that money can buy. 


36 | Creating digital artwork 


Choose white from the Saturation/Value 

triangle and begin painting a highlight on the 
sphere. To get a more solid stroke, try increasing the 
Grain slider in the Controls palette. This will increase 
the penetration of colour into the paper, showing 
less of the paper grain and making the stroke 
appear more solid. 


Increase the size of your Liquid tool and 

decrease its opacity in the Controls palette. 
Then use it to smooth out the blending between 
highlight and shadow within your sphere. By 
decreasing the opacity you soften the effect of the 
the Liquid tool you have chosen, resulting in a 
smoother transition of colour. 


10 | Use the exact same method that you used for 
the sphere to add in areas of highlight and 
shadow using the Dry Media tool, and then use the 
Liquid tool to smooth out the colours and gently 
blend them together as well as to smooth the outer 
edge. When you are finished, create another layer 
under the sphere layer and use the same method 
to begin the cube. 


G Select the Liquid tool from the Brushes palette, 
and choose ‘Just Add Water' from the Brush 
Variant pop-up. In the Controls palette, increase the 
Size to about 50. Now, use the Liquid brush to paint 
over the highlights and shadows within the sphere 
to blend colours together. 


8 | Use the Hue Ring and the Saturation/Value 
triangle in the Colours section of the Art 
Materials palette to select a golden orange colour. 
Choose Dry Media again from the Brushes palette, 
and Artist Pastel Chalk from the Brush Variant 
pop-up. Switch on the visibility of your sketch layer. 


11 | You may have to use some very small brushes 
to keep the edges of the cube looking sharp. 
Also, don't be afraid to use the Eraser tool from the 
Brushes palette to remove any rough edges from 
your cube. Choose Brushes from the Brushes menu 
and select Smeary Flat from the Brush Variant 
pop-up. Select a green colour and use varying 
brush sizes and opacity to add in some colour on 
the canvas layer. 


Switch off the visibility of the sketch layer in 
the Layers section of the Objects palette. You 
will be able to see the rough edge of your sphere. 
Disable Preserve Transparency on your sphere layer. 
Now use the Liquid tool around the edges of the 
sphere to alter its shape and make it appear 
smoother and rounder. 


9 | Create a new layer and position it below the 
sphere layer by clicking and dragging its name 
in the Layers section of the Objects palette. Use 
your Dry Media brush, with the Opacity set to 100, 
to fill in the solid area of the cone on your layer, just 
like you did with the sphere. Use smaller brush sizes 
when painting areas such as the tip of the cone. 


Also, add in some yellow colours here and 

there. Notice how the direction of your stroke 
affects the way the paint is applied when using the 
Smeary Flat option. Finish off this layer by using the 
Liquid brush with ‘Just Add Water’ selected from the 
Brush Variant pop-up to smooth out the colours, 
the same way you did previously for the primitive 
shapes. Refer to the file part3.rif on the CD if you're 
having any difficulties. 


Part 4: The finishing touches 


Time to add in some subtle shadows and explore the paper textures as we finish off our image... 


Using a mouse 


Although we did this tutorial 
using a pressure-sensitive 
Wacom tablet, you can achieve 
the same results with a mouse. 
As many first-time users of 
Painter are unlikely to own a 
tablet, we deliberately avoided 
advanced pressure sensitivity 
and tilt settings. When using a 
mouse you can compensate for 
the lack of pressure sensitivity by 
using the Size, Opacity and Grain 
sliders in the Controls palette. 
Painter goes to great lengths to 
support mouse usage, and those 
looking to find Advanced mouse 
controls should check out 
Window>Show Brush Controls. 
Here you can set mouse controls 
for tilt, bearing and pressure, for 
example. That said, if you use 
Paintera lot we advise you to buy 
a tablet. Drawing with a pen as 
opposed to a mouse is so much 
more intuitive and natural that 
you are bound to experiment 
more and achieve better results. 
See our roundup of graphics 
tablets in issue 34 of Computer 
Arts Special — Photoshop. 


Brush tracking 


When drawing or painting, 
pressure and speed affect the 
look of the resulting strokes. 
Paintertakes into account that 
you may wish to draw lighter, 
darker or faster depending on 
which tool you are using. Brush 
tracking addresses this. Under 
Edit>Preferences>Brush 
Tracking you will find a dialog 
box containing a scratch pad. 
Draw a normal stroke on the 
scratch pad. Painter saves this as 
your default stroke and bases 
speed and/or pressure 
variations on it. Feel free to 
change brush tracking for 
different phases ina project. For 
instance, if you are using a 
specific tracking setting for 
painting with chalk or pastel, you 
may want to adjust the tracking to 
behave differently when you 
switch to a different tool such as 
water or pencil. 


Create a new layer and name it ‘shadows’. 

Position it above the canvas layer and below 
all the others. Select Dry Media from the Brushes 
palette, and Artist Pastel Chalk from the Brush 
Variant pop-up. Choose a black colour and paint in 
some rough shadows. Use a lighter opacity the 
further away from the objects you get, but don't 
be too fussy. 


Hide the Colours section of the Art Materials 

palette and display the Papers section instead. 
You probably need to increase the size of your 
palette to see all the paper options. Select the paper 
called Rocky from the drawer of Paper Presets, 
increase the Paper Scale to 210 per cent and the 
Contrast to 330 per cent. Choose Dry Media from 
the Brushes palette and Large Chalk from the Brush 
Variant pop-up. 


rc 


Let's add a little variety to our surface texture 

by combining different paper textures. Select 
Rice Paper from the Preset drawer in the Papers 
section of the Art Materials palette. Enable the 
Invert Paper function, increase the Scale to 300 per 
cent and the Contrast to 225 per cent. In the 
Controls palette decrease the Grain slider for your 
current Dry Media brush to 7 per cent. 


2d In the Layers section of the Objects palette 
switch the composite method of the shadows 
layer to Multiply for a more realistic effect. Then 
choose the Liquid brush with ‘Just Add Water’ 
selected, and smooth out some of the rough black 
lines to make smooth transitions in the shadows. 


5 | In the Controls palette set the Size to 60, the 
Opacity to 100 per cent, and the Grain very 
low at 10. Create a new layer on top of all the 
others. Use the Eyedropper tool to select very light 
colours from within the image (hold down Option/ 
Alt while using the brush). Use your Dry Media 
Large Chalk brush to paint over some of the lighter 
areas to express texture. 


8 | Use the Eyedropper tool to select light colours 
from within the image and, again, paint over 
some of the lighter areas of the image using lighter 
versions of the same or similar colours to create the 
illusion of highlights. Using this method and 
combining a couple of different paper textures can 
create interesting and believable surface textures. 
Check out part4.rif on the CD for the final stage. 


ei Create a new layer on top of the others. Enable 
‘Pick Up Underlying Colour’ in the Layers 
section of the Objects palette. Use your current 
brush but reduce the size and opacity, and paint 
over areas that appear too sharp, such as where the 
cone meets its shadow or where the sphere overlaps 
the background. This creates a soft stroke based on 
all the colours on the layers beneath, and helps to 
remedy the feeling of sharpness. 


G Enable the Invert Paper function in the Papers 
section of the Art Materials palette. Now use 
the same brush on the same layer, but choose some 
of the darkest colours from within the image and 
paint over some of the darker areas. This creates the 
illusion of recessed areas, just as painting with 
lighter colours creates the illusion of highlights. 


At this point you have learned all the 

techniques necessary to create the illustration 
as you see it here. Feel free to continue if you like 
and don't be afraid to experiment or embellish upon 
some of these techniques. Happy painting! EEE) 
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Getting started 
with Illustrator 10 


It started life as a vector art package, and 
today it's a veritable graphics generation suite. 
Illustrator could be the ultimate tool for 
creating illustrations. Here are the basics... 


dobe /llustrator is one of the 
most powerful drawing 
applications available, with 


This issue, we'll introduce you to 
Illustrator and show you how to use it to 
create some simple graphics. 

We'll be concentrating on the basics 
of /llustrator, along the way giving you 
some helpful hints and tips to aid your 


an industry-standard toolset. 


learning experience. The first part of the 
tutorial is a step-by-step guide to 
creating some simple icons, while in the 
latter part of the tutorial we show you 
how to create our illustration. 

All the files you will need forthe 
tutorial can be found on the CD, 
including step-by-step files for creating 
the icons, so grab your copy of /llustrator 
and follow along. 


Part 1: The pencil icon 


It is often easier to create complex artwork by starting off with simple shapes, and 
using tools such as the Pathfinders to combine them into more complex artwork... 


Details 


You can buy the full version of 
Illustrator 10 from Adobe for 
£387 [w] www.adobe.co.uk. You 
can download the demo from [w] 
www.adobe.com/support/ 
downloads. We couldn't fit the 
demo of Illustrator on the CD 
with this issue. However, if you 
would like a demo with which to 
follow the tutorial, Adobe has 
demo CDs to send to the first 
5000 Computer Arts Special 
readers who contact the 
company. Visit [w] www.adobe. 
co.uk/tryoutcd and fillin the 
Web form if you would like one. 


Pen drawing 


When using the Pen tool to draw 
objects made up of straight lines, 
simply click to place points. 
Wherever you click subsequently 
will place a new point, connected 
by a straight line to the point that 
precedes it. If you hold down the 
Shift key while drawing you will 
constrain the placement of 
points in 45-degree increments. 


Curves in places... 


When using the Pen tool to draw 
curves, click and drag to pull out 
control handles. Keep the mouse 
held down when you pull out a 
handle and notice how the 
handle affects the curve. The 
direction of the handle controls 
the direction of the curve, while 
the length sets the depth. 


Drawing accuracy 


When learning to use the Pen 
tool don't worry if your drawing 
isn't absolutely accurate to begin 
with as you can always edit the 
points and curves afterwards 
with the white Selection tool. 


Points and curves 


When placing points in curved 
lines, remember that the fewer 
the number of points the 
smoother the lines will be. Also, 
when pulling out handles try to 
avoid overlapping handles from 
the previous point as this will 


cause kinks in the curve. 


The cursor alert 


Learn to watch your cursor. In 
Illustrator the cursor changes to 
indicate various things, such as 
the tool you are currently using 
and whether your cursor is 
placed over a point or line. 
Learning to recognise the various 
cursor indicators can save you 
time by avoiding mistakes. 


G The first step in building our image is to create 
the eraser for the pencil. Create the rubber tip 
by drawing out a rounded rectangle and, with the 
mouse button still held down, press the Up and 
Down arrow keys to adjust the roundness, then 
release the mouse button once you're happy with 
the result. See ‘pencil graphic steps.ai’ on the CD if 
you need assistance. 


wT 


arc scaled down and 
positioned in grid square 


Position the left side of the arc at the corner of 

one of the grid squares using the black 
Selection tool. You will notice a bounding box 
appears around the arc with handles. Use the 
handle on the right to resize the arc to fit within the 
grid square, holding Shift down as you do so in 
order to scale the arc down correctly. 


Now use Object>Path>Outline Stroke to 
convert the lines into shapes. Next, use the 
Combine button on the Pathfinder palette to turn 
the shapes into a compound path. Click on the 
Expand button on the Pathfinder palette and then 
deselect the shape by clicking on a blank part of the 
screen. Use View>Artwork to go into Artwork 
mode. Use the white Selection tool to select the 
outer shape and remove it by hitting Delete twice. 
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rounded rectangle overlapped 
bby normal rectangle 


objects after pathfinder Expanded pathfinder result 


with extra rectangle 


Draw out a normal rectangle and position it 

overlapping the rounded rectangle. Now select 
the two shapes and use the Pathfinder palette 
(Window>Pathfinder) to cut the front rectangle 
away by clicking on the ‘Subtract from Shape Area’ 
button, then click on the Expand button. Now draw 
out another rectangle below the first shape. 


We Edit Object Type Select Filter Effect View Window Help 
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G Hold down the Option/Alt key and drag the 
arc to the next grid square. Notice how the 
cursor changes to overlapping pointers, which 
indicates that you are dragging a copy of the arc. 
Now use Object>Transform>Transform Again to 
repeat the last step (Command/Ctrl+D). 


8 | Use View>Preview to go back into Preview 
mode. Reposition the eraser shapes above the 
rest of the pencil graphic. Select all the shapes and 
align them with the Align palette (Window>Align) 
by clicking on the Horizontal Align Centre button. 
Next, use the Combine button on the Pathfinder 
palette to turn the separate shapes into one 
compound path. 
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grids turned on and 
arc tool used 


Arc rotated 90 degrees 


g Turn on the grid (View>Show Grid) and Snap 
to Grid (also under the View menu). Now 
select the Arc tool and drag from one corner of one 
of the grid squares to the opposite corner (an easy 
matter due to the grid snap). Now use the Rotate 
tool to turn the arc by 90 degrees (hold Shift down 
to constrain the rotation). 
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Turn on ‘Disable Auto Add/Delete' in the 

General Preferences. Now use the Pen tool to 
draw some lines as shown (grid snap will ensure the 
lines are accurate). Select all these lines with the 
black Selection tool and use the Stroke palette 
(Window>Stroke) to set the thickness of the lines. 
Also turn on round joins by clicking on the Round 
Join button. 


9 | Draw a large rounded rectangle and apply a 
different colour to it. Send this shape to the 
back (Object>Arrange>Send to Back) and align the 
pencil icon with the rounded rectangle by clicking 
on the Horizontal Align Centre and Vertical Align 
Centre buttons of the Align palette. Finally, select 
both shapes and then group them together 
(Object>Group). > 
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Part 2: The eye icon 


The Outline Stroke command is great for turning lines into shapes. Here's how to create the eye icon... 


Your preferences 


One handy feature when first 
learning /llustrator is to turn on 
Show Tooltips in General 
Preferences. Now when you hold 
your mouse over most parts of 
the interface a little pop-up will 
appear with the name or function 


of that particular tool or button. 


1] To create the eye icon draw out an oval with 
no Fill but do give it a Stroke setting. Select the 
Convert Direction tool from the Pen toolset and 
click on the end points of the oval to create sharp 
edges. If you wish you can use the white Selection 
tool to adjust the handles on the top and bottom 
points to make a more rounded shape. See ‘eye 
graphic steps.ai’ on the CD for this section. 


Part 3: The phone icon 


The Transform Again function creates multiple repeated shapes, and is handy for the creation of graphics... 


More tools 


Some of the tools in the toolbar 
have a small arrow in the corner, 
indicating that there are more 
tools available within that tool. To 
access these extra tools, click 
and hold on the tool in the 
toolbar to bring up a pop-up 
toolset. If you then drag along to 
the arrow on the end of this 
pop-up and release the mouse 
you will tear off the toolset, which 
makes selecting the various tools 
available easier. 
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ww Draw out a rounded rectangle for the phone 
body. Draw another rounded rectangle for the 
aerial and combine the two together. Draw a third 
rounded rectangle for the screen and use the 
Subtract from Shape Area button. Create the 
buttons by Option/Alt-dragging and clicking 
Transform Again. Select the buttons and combine 
them, before subtracting them from the rest of the 
phone using the Subtract from Shape Area button. 
Open ‘phone graphic steps.ai’ on the CD for help. 


Part 4: The hand icon 


The Join function is a powerful tool that creates complex designs by joining up parts of simpler shapes... 


Save time 


When drawing simple shapes try 
the following time-savers. Some 
tools, such as the Polygon tool 
and Star tool, enable you to set 
the number of sides or points 
while drawing them out by 
pressing the Up or Down arrow 
keys. Holding Alt/Option down 
while drawing with any of the 
shape tools draws the shape from 
the centre, while holding Shift 
constrains the shape in some 
way. Other tools, such as Star and 
Spiral, enable you to hold down 
Command/Ctrl and drag left and 
right while drawing to change 
settings interactively. Holding 
the spacebar while drawing 
shapes enables you to reposition 


the shape on screen. 
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@ For the hand icon create the shape shown by 
overlapping two rectangles and using Subtract 
from Shape Area from the Pathfinder palette. Click 
on the Expand button, select this shape and choose 
Filter>Stylise>Round Corners. You may need to 
experiment with the number needed to get the 
correct result. See ‘hand graphic steps.ai’ on the CD 
if you need assistance. 


2 | Adjust the thickness of the line using the 
Stroke palette (Window>Stroke). Once you're 
happy with the thickness of the Stroke setting, use 
Object>Path>Outline Stroke to convert the line into 
an actual shape. Now create a circle and use the 
Align palette to centre the two shapes. Combine the 
two shapes using the Pathfinder palette. 


alt click around here 
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Draw asmall rectangle like that shown above 
and reposition it between two grid lines as 
shown. This way you know where the centre line for 
the rectangle is. Select the Rotate tool and move the 

cursor to some point on the centre line below the 
rectangle. Now, if you hold down the Option/Alt 
key and click at this point you will set the rotation 
point for the rectangle and bring up the Rotate tool 
Options dialog box. 


For the button, create an oval and Option/Alt- 

drag a copy of it downwards while holding 
Shift to ensure it is aligned. Select the top oval and 
copy it (Object>Copy or Command/Ctrl+C). Now 
use the white Selection tool to delete the top points 
of both these ovals. Select the end points of both 
these arcs at one side only and join them together 
by using Object>Path>Join (Command+J), then 
repeat for the other side. Now if you Paste in front 
(Command+F) you will place back the oval that we 
copied earlier. Use the arrow keys on the keyboard 
to nudge this oval upwards. 


Draw a rectangle below the eye, then switch to 

the black Selection tool. Hold Option/Alt then 
drag the rectangle to the right while holding Shift to 
ensure it stays aligned. Use Object>Transform> 
Transform Again to repeat the last step and create a 
third rectangle, then combine the three rectangles. 
Select the eye and rectangles then align them using 
the Align palette, before combining everything. 


Now for a neat trick. Type in 360/8 in the 

Angle box (we want eight circles in a perfect 
radial array) and check the Preview button. 
I/lustrator automatically works out the angle needed 
for you. Click on Copy and then Transform Again 
another six times to create a perfect array of eight 
rectangles. Delete the top and bottom rectangles, 
select the remaining six, and combine them. 


To make an easy arrow, create a triangle using 

the Polygon tool (remember to press the Down 
arrow key with the mouse held down to create a 
triangle, and hold Shift to constrain it). Next draw a 
rectangle and place it overlapping the triangle to the 
bottom. Align these two shapes with the Align 
palette, then combine them into one shape with the 
Combine button on the Pathfinder palette. Finally, 
rotate the arrow into position. 


Part 5: Putting it all together 


Now we'll take our icons and put everything together to create our finished 
illustration. Use layers to organise the different elements of your artwork... 


Repeating shapes 
Areally easy way to create 
multiple repeated shapes is to 
use the Option/Alt key and the 
Transform tools. Create a shape 
and, using the black Selection 
tool, hold down Option/Alt and 
drag it somewhere to make and 
move a copy of the shape. If you 
now use Object>Transform> 
Transform Again you will repeat 
the last step. If you keep 
Transforming Again you will form 
a row of your shapes. Select all 
these shapes and Option/Alt- 
drag them downward. Use 
Transform Again a few times and 
you will quickly form a grid of 
shapes. For perfect alignment, 
turn on grid snap, or hold down 
Shift as you Alt-drag 


The Illustrator 10 
Wow! Book 


Sharon Stever 
Peachpit Press 
£37.99 

ISBN: 0201784815 


Appearing a little more text 
heavy than its sister publication 
on Painter (also reviewed in this 
issue), this doesn't detract from 
the excellent quality of the 
presentation. Following broadly 
the Wow! format of basic 
technique followed by tips, 
exercises and techniques, before 
the gallery and reference 
section, this is another superb 
book that all Illustrator users 
should own, 

Over seven chapters all of the 
key features of /llustrator are 
covered. Not just for beginners, 
the author has included 
something for everyone, but 
novices will have no problems 
following. Perhaps a little too 
generous with the gallery 
sections, this is a superb guide to 
Illustrator 10 and a worthy 
addition to the Wow! series. 
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1 | In anew file, create a grid of rounded squares 
with a Fill and no Stroke using the Alt-drag 
and Transform Again technique again. Select over 
some of these squares with the black Lasso Selection 
tool and delete them. Select some of the remaining 
squares and give them a different Fill Colour before 
grouping them. Select all the remaining squares of 
the other colour by using the Magic Wand tool and 
group these, too. 
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4 | Open up the previously saved icons (or open 

the icons.ai file from the CD) and Copy and 
Paste some of them on to another new layer in our 
new document. Copy and Paste or Option/Alt-drag 
various icons to different parts of the image. Resize 
some of the icons while holding Shift. Play around 
with different Opacity and Blending Mode settings 
in the Opacity palette (Window>Opacity). 
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Copy and Paste both groups of squares and 
reverse the Fill and Stroke settings of the 
copied groups by selecting the group you want then 
clicking on the double-headed arrow in the upper- 
right corner of the colour pickers at the bottom of 
the toolbar. Adjust the colour and thickness of the 

strokes as necessary. Copy and Paste a section of 
these squares to use as a background. 


Now we'll use the Free Transform tool to add 

some perspective to some of our icons. Select 
an icon first, then choose the Free Transform tool in 
the toolbar. Click first on a corner of the bounding 
box that appears and then, with the mouse held 
down, hold down the Command/Ctrl key and you 
will be able to distort the shape. Holding Option/Alt 
+Shift transforms two sides at the same time. Once 
you're happy with the result, rotate the icon into the 
required position. 
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Now with the white Selection tool select every 

other vertical pair of points on the mesh as 
shown. Move these points upwards with the arrow 
keys on the keyboard (if you hold Shift down as you 
do so the movement will be ten times the Keyboard 
Increment setting in the Preferences, so you can 
quickly and accurately move things). 


8 | Before you can apply any colour changes to 
this new shape you must expand it. Use 
Object>Envelope>Expand to do so. Then, you must 
ungroup the shape (Object>Ungroup), otherwise 
you will not see any changes if you try to apply a 
different Colour or Opacity setting. 


Create a new layer by clicking on the new 
Layer icon in the Layers palette (Window> 
Layers) and use the Pen tool to draw up a simple 
geometric shape as shown. Copy and Paste this 
shape a few times and resize using the black 
Selection tool. Apply a Gradient and adjust the 
Opacity of these shapes using the Opacity palette. 
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Gg On a new layer use the Pen tool to draw a 
shape as shown. We'll now use the Warp 
function to turn it into a wiggly snake-like shape. 
Select the shape with the black Selection tool and 
use Object>Envelope distort>Make with Mesh. 
Make the mesh with one row and six columns, You 
can click on the Preview button to check your result. 
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Option/Alt-drag to place copies of the shape 

around the composition. Finally, draw up some 
simple arrow shapes and add them to the 
composition. Experiment with different Gradients 
and Opacity settings for the different objects using 
the Opacity and Gradient palettes. You can refer to 
the ‘final icons design.ai' file on the CD. EES 
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Web design 


Create a site in both Dreamweaver and Flash, then 
step into the wondrous world of Flash animation... 


The World Wide Web is a playground of both 
communication and creativity. Whether 
you're totally fresh to digital creativity, or 
| stepping into Web design from another 
creative discipline, our section on creating Websites 
and Flash animation will get you on your way. 

Firstly, we're going to use Dreamweaver MX to 
create a basic Website, and along the way you'll learn 
the basic tools the application has to offer, and gaina 


44 Getting started with 
Dreamweaver MX 


43 Getting started with Flash MX 


FP cet started in Flash animation 
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fundamental understanding of what it can do. After 
that, you have the opportunity to create the same site 
again, but this time using Flash MX. Both tools are 
designed for the creation of Websites, but each has 
strengths and weaknesses. We thought it would be an 
interesting idea to tackle the learning of the 
applications like this. That way you can not only learn 
the basics of each, but it might also help you choose 
which you prefer. 


Over the past three or four years, we have also 
found that creating animation for the Web has become 
one of the most popular and exciting areas of Web 
design. Included here in the Web design section is 
a tutorial on Flash animation to help get you started, 
by offering you the skills needed to make things 
move around your site in the way you want them to. 
Who knows, this section could unlock the Walt Disney 
in you... GEE 
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Illustration: Bryn Owens [w] www.bluntdog.co.uk 
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Getting started with 


Dreamweaver MX 


Putting together your first Web pages could 
be easier than you expect. Dreamweaver MX 
provides a fast track to Web success... 


reamweaver MX adds a 
level of complexity that 
hasn't been available in 

\ mainstream Web design 
tools before — but it still has all the 
features that beginners need to get 
started. In fact, with the new bundled 
templates and New Site wizard, it’s 
easier to create great Websites from 
scratch than it was before. 

In this tutorial we're going to create a 

very simple page design. It won't even 


have any content in it (unless you choose 
to put some in of your own) but in that 
process you'll cover all the basics of 
page creation, from site configuration to 
publication. You'll learn how to place 
images, use tables for layout, format text 
and use simple Cascading Style Sheets 
as you go. You'll come out the other end 
with enough knowledge about 
Dreamweaver MX to start building your 
own pages straight away. And, once we 
have completed the site, we are going to 


create a Flash version of it in our next 
tutorial starting on page 48. 
Dreamweaver MxX splits into three 
parts: the main document window where 
all the building gets done, an Insert 
toolbar that enables you to place 
different kinds of content into your 
pages, and a Properties panel where you 
can change the individual parameters of 
that content. These are the only parts of 
the program you need to familiarise 
yourself with to start creating pages. 


Part 1: Getting started 


Dreamweaver MX makes it easier to set up a new site than ever before... 


Details 


The demo of Dreamweaver MX is 
on the cover CD. You can buy the 
full version for £351 from [w] 
www.macromedia.com. 


Table fix 


You'll notice that you can't resize 
cells past existing fixed cells. 
When this happens you'll have to 
resize the cell numerically. When 
you have a fully defined table, 
the best way to resize cells is to 
switch to Standard View and 
enter the values manually. 


Colour schemer 


If you're stuck for ideas about 
how to compose a colour scheme 
for your site, visit [w] 
www.colorschemer.com/online/ 
foran online tool that helps you 
choose compatible hues. 


Dreamweaver 4 for 
Windows and 
Macintosh 

(Visual QuickStart Guide) 


Peachpit Press 
ISBN: 0201734303 
Tarin Towers 
£16.99 


We haven't reviewed any 
Dreamweaver MX books as yet, 
but this Visual QuickStart 
volume is one of the best 
Dreamweaver books we've 
seen yet. 

This edition covers, in detail, all 
the enhancements made since 
version 3, such as table layout 
mode and the new toolbar. 
Chapters consist of numbered 
steps within each tutorial that 
can be easily followed and are 
always well supported with 
screenshots and illustrations. 
As an introduction to 
Dreamweaver this is second to 
none. Basic operation is covered, 
but the authors also enable you 
to flex your muscles with more 
complex tools such as JavaScript 
and Flash. 
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Start your demo version of Dreamweaver, 

which is on the cover CD, and open a new 
document. Go to File>New then choose Basic Page. 
Go to the Site menu and choose New Site. Name 
the MyNewsSite and click Next. In the next screen 
choose No, | do not want to use server technology. 
Accept the defaults, then choose None when 
prompted to choose a server connection. 
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In the Site panel choose File>New Folder, and 

name it Images. Click on Desktop to access 
your computer's directory structure, browse to the 
Computer Arts Special cover CD and the 
Tutorial\Dreamweaver folder. Drag and drop the file 
logo.gif into the new images folder. 


Site Folder: C:\Documents and Settings\KatMy Documente\Te | 


Switch back to the blank page. Go to 

Modify>Page Properties. You can set text 
colours and link properties in the dialog box that 
appears, but the defaults are fine. Give the page the 
title MyNewsSite. You can also change basic page 
properties in the Properties Inspector, located at the 
bottom of the screen, when no other HTML 
element is selected. 
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Look at the Insert toolbar and select the 
Layout tab. Toggle Layout View on. Select the 
Draw Layout Table button on the Insert toolbar, 
click and drag in the document window to draw a 
Layout table. In the Properties panel, set the Width 
of the table to 700 and Height to 400. 


5 | Select the Draw Layout Cell button in the 
Insert toolbar. Draw a table cell halfway across 
the top of the table. To draw multiple cells within a 
table, hold down the Ctrl key in Windows or 
Command on the Mac. Holding down Alt (Win) or 
Option (Mac) disables snapping. 


See OB)O 
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Click within the second cell to place the 
flashing text cursor within it, then import the 

logo.gif image into the cell. You can do this by going 

to Insert>Image menu, clicking on the Common tab 

and selecting the Insert Image icon or dragging and 

dropping the file from the site window. 


8 | Click on the second cell containing the logo 
image to select it, then use the handles to 
resize it to fit the image exactly. The Properties 
panel should read 270x70 pixels. You could use the 
Properties Inspector to make a numeric adjustment 
instead. Drag the cell into position on the right of 
the table. 


G Add a second cell right next to the first, then 
add a narrow bottom row across the length of 
the table immediately under the first two cells. You'll 
notice that faint guidelines have been added to the 
page where there aren't any cells — these will come 
in handy later. 


9 | Resize the remaining cells. You can make 
numeric adjustments using the Properties 
Inspector to change the height and width values of 
the cells. The first cell should be 430x70 pixels and 
the row below 700x390 pixels. > 
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Part 2: Adding text, links and formatting 


The next step is to add some style to your Web pages... 


Smart styles 


We chose to use pixel 
measurements in our CSS 
formatted text forthe sake of 
cross-platform compatibility. 


Dreamweaver MX enables you to 


create reusable HTML Styles 
that combine the flexibility of 
Style Sheets with the 


compatibility of standard HTML. 


Sans serif 


Fonts without fancy bits are more 


readable on computer screens. 
The fonts we specify here, Arial 
and Helvetica, are the most 
popular sans serif fonts on 
Windows and the Mac 
respectively. If, by any chance, 
a.user encounters the site 
without either of those installed, 
a generic sans serif font will 

be substituted 
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Al The News YouNeed 


| 
| 
| 
| 
| 
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1 | In Layout view, place the cursor in the first cell. 
Type in the phrase, All The News You Need. 
Select the cell and go to the Property Inspector. Set 
Horizontal Alignment (the box labelled HORZ) to 
Center and Vertical Alignment (the box labelled 
VERT) to Middle. 
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4 | Select the row below the two top cells. In the 
Properties Inspector choose Bg to set the 
background colour for the cell. Use the Eyedropper 
tool that appears to select colour directly from the 
logo image on the page. 


lews You Need 


Go to the CSS Styles panel and create a New 

Style. Choose Use CSS Selector and select 
a:link from the drop-down. Ensure This Document 
Only is ticked before you click on OK. In the Style 
dialog, set the font as Arial, Helvetica, sans-serif, 
Size to 14 pixels and Decoration to none. Set the 
Type Colour to black. 
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Go to Window>CSs Styles to open the CSS 

Styles panel. Click the arrow in the top-right 
corner of the panel to access a menu. Choose New 
Style. Name the style .logo and leave Make Custom 
Style (class) selected. Select This Document Only 
then click on OK. 
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5 Switch to Standard view so that you can split 
the table cell. Place the cursor within the cell, 
then go to Modify>Table>Split Cell. Split it into two 
columns. The cell splits along the guides that are 
already in place. Switch back to Layout view. 


Click OK then create a second new style using 

CSS Selector. This time choose a:hover. Set the 
style parameters as before except change 
Decoration to Underlined and set the Colour to a 
light blue. These Style Sheet amendments 
automatically set up text rollover effects for links 
within your page. 


In the next dialog select Type in the category 
list. Set the font for the style to Arial, Helvetica, 
sans-serif. The Size should be set to 24 pixels, 
Weight to bold and Decoration to none. Click OK 
when you're done. Select the text and apply the 
Style by double-clicking on Logo in the Styles list. 


e News You Need 


6 | In the newly split cell below the logo, type: 
about | news | contact | archive. PC users will 
find the | symbol just above their Ctrl key. On the 
Mac you can insert it by going to Characters in the 
Insert panel and the Insert Other Character icon. 
Type &#124; in the Insert box. 


Select the word ‘about' in the cell you've been 

working in and type in the link about.html in 
the Properties Inspector Link box. Add links named 
news.html, contact.html and archive.html to the 
other elements respectively. Click the Preview 
button to test your Style Sheet text rollovers. 


Part 3: Creating templates and cleaning up 


Templates remain largely unchanged, but improvements to visual aids make them easier to work with... 


1 | Add two further cells to your page - one 
taking up most of the remaining area, at 
700x280 pixels and a narrow row below that at 
700x20 pixels. Set the Background Colour of the 
bottom row to the same green as the logo. 


Macromedia Dreamweaver MX. [MyDesig.ntew tent (Untitied-39 


= Reet Trav 


ro ~ 
| 
All The New SIE: 
AddiRemove Netscape Resize Fix 
Cuneo Pet 
seas some 


Go to Commands>Clean Up HTML. Tick all 
the boxes except Specific Tags. If you've 
made errors during the tutorial, this should clean up 

any mess in your code. The Apply Source 
Formatting option is useful when you import code 
from other packages. 
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All The News You Need 


4 | Save the page, then go to File>New. Click on 
the Templates tab and select the template 
called ‘main’ that you've just created. Alter the Title 
box to read MyNewsSite - Contents, then save it as 
index.html in your site folder. 


5 | Go to File>New again, selecting the template 
from the list. Save this as about.html. Create 
further pages in the same way, naming them 
news.html, contact.html and archive.html. 

Preview your site in a browser to see that your links 
now work. 
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Go to File>Save As Template. In the dialog that 
appears, name the Template ‘main’ then click 
OK. Make sure you're in Layout Mode so that you 
can easily select table cells. Select the large table cell 
in the middle of your page, then go to the Insert 
toolbar and select Templates. Click the New Editable 
Region icon and name it ‘content’ when prompted. 
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appeal fer begnners and experts ale thas a depth and 
~ butt also works pretty well straght out of the box. The mo 
few years. The program has three important areas, the main 
Jon ‘Insert’ toolbar that lets you place different kinds of content 
change the indondual parameters ofthat content, Alhotgh 
hy parte of the program you really need to famikarise yourself 


G The Editable Region you added earlier enables 
you to add content to that section of each 
page, including further table cells if necessary. 

Go to Site>Check Links Sitewide. This will then 
check to ensure that you didn't make any errors 
when adding links. 
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Part 4: Publishing pages 


Now that the pages are all put together, we can publish them... 


Template torment 
We run the Clean Up HTML 


command on ourfile before 
saving it as a template, as it will 
go on to become the basis of our 
pages. Removing Dreamweaver 
comments from template-based 
pages breaks them. 


Bandwidth bonus 


Keep an eye on the information 
at the bottom-left of the main 
Dreamweaver window. Here 
you'll see the total size of the 
page in kilobytes alongside an 
estimate of how long it should 
take to download. 


Switch to the site window and choose Edit Site 

from the Site menu. Select MyNewsSite from 
the list and click Edit. Click on the Advanced tab 
then, assuming that you're uploading to Web space 
hosted by your ISP over a modem, choose Remote 
Info from the list and FTP from the drop-down 
menu labelled Access. 


Dlastomatcahy unload Hes to server on save 
Check In Out [abe Fle Check tn and Check Out 


In the box labelled FTP Host, type in FTP the 

address of your Web space. If you don’t know 
what it is, check the help documentation on your 
ISPs Website. Your Login and Password details are 
usually the same as those you use to dial in to your 
ISP. Click OK when you're done. 


Click the Connect to Remote Host icon to 

connect. You can now either drag and drop 
files from the Local pane on the right to the Remote 
host on the left, or click on the Put Files icon to start 
uploading your site to the Web. FEES 
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Getting started 
with Flash MX 


Your Websites don't need to be created by 
using stuffy old HTML — Macromedia's Flash 
Mx is the leaner, cleaner alternative... 


he Flash player is so popular 
that it’s virtually guaranteed 
that your users will be able 
to view pages created in 
Flash. \tcomes as standard with all the 
main browsers (now including Opera) 
and includes built-in functionality that 
enables users to update their player 
whenever content is incompatible. 
Flash doesn't have to be all about 
clever animations and recreations of 


arcade games; it can be used to build 
Websites from scratch. How 
complicated those sites are is up to you, 
but with the small file sizes generated by 
Flash, it’s worth considering as an option 
whatever type of page you're producing. 
And to prove the point, we're recreating 
the exact same site we made in our 
getting started guide to Dreamweaver 
MX in Flash MX. The layout and features 
are virtually identical, but the medium 


Ittustration: Bryn Owens [w] www.bluntdog.co.uk 


makes the resulta little more flexible 
than standard HTML alone. 

The Flash version of our site can 
resize to any browser resolution, and it 
includes external dynamic files that can 
be easily updated. You don't have to be a 
Flash expert to follow this tutorial either. 
We've stuck to the basics and introduced 
a little ActionScript at the end to give a 
taste of what the package is truly 
capable of. 


Part 1: Page layout 


Use Flash MX drawing tools to reproduce the layout of the Website... 


Separate rooms 


This layout is reasonably simple, 
and we could have put it together 
all on one layer. However, 
working in separate layers makes 
it easier to select different 
objects. Flash automatically joins 
shapes together as well, making 
working in layers essential if you 
want to be able to adjust 
individual elements. Another 
solution is to convert all your 
graphic elements into symbols. 


In context 


Some of Flash MX’s functions are 
hidden away following the 
interface revamp. In most cases, 
bringing up the context sensitive 
menu will give you a full list of 
commands that can be applied to 
any object. In Windows, select 
the element you want to change, 
whether it's a symbol, vector 
shape, bitmap ortimeline frame, 
and right-click the mouse. Mac 
users need to Command-click to 
open the menu. 
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Open your demo version of Flash MX which is 
on the cover CD — a new document is created. 
Go to the Properties Inspector at the bottom of the 


Go to File>Import to Library. Look for the file 
Go to View>Grid>Edit Grid. Set the grid size to logo.png in the Tutorial/Flash folder on the 
10x10. Tick the boxes labelled Show Grid and cover CD and import it. When prompted, choose to 
Snap to Grid. Set the Snap Accuracy to Always Snap. load the file as a single flattened bitmap. 


screen and click on the Size button. Set the size of 
the document to 700x400. 
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Ga Select the rectangle tool from the tools panel. 

In the Properties Inspector select the Stroke G Draw a rectangle that's 430x70 pixels 
4 | Open the Library by going to Window>Library Colour palette and select None (the icon with the immediately adjacent to the logo you place 

or hitting F11. Drag and drop an instance of diagonal red stripe through it). Open the Fill palette —_ before. Deselect the rectangle you just drew and set 
logo.png to the canvas. Position the graphic in the the fill colour to a darker green. Draw a second 
top-right corner of the screen; X 430, Y 0. rectangle of 700x30 pixels below the top one. 


and use the Eyedropper to select the background 
colour of logo.png. 


Ss 


Select the keyframe in the new Text layer and 

select the Text tool. In the Properties Inspector 
choose a sans serif font and set its size to 36 points, 
Add the text, All the News You Need, to the banner 
at the top of the stage. Make sure the text type is 
set to Static Text. > 


8 | Create two new layers by clicking on the Insert 
Layer icon in the bottom-left corner of the 
Timeline. Double-click on the label to rename the 
first of these new layers, naming it Text. Name the 
second Dynamic Content. 


Draw a final rectangle of 700x20 pixels at the 
very bottom of the screen, setting the colour 
to the same green as the logo.png background. 
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Part 2: Buttons 


Animate rollover buttons in symbol-editing mode... 


Break Apart 


The Break Apart command has 


two stages when applied to text, 
which is why we apply it twice in 


|b) ie) i Cs [eons fom RAST 


the example given here. The first 
time it's applied, the letters ina 
text string are separated out. The 
second time it's applied, the text 
is converted to paths. 


Bolder folders 


Both the Library and the Timeline 
enable you to create folders to 
organise elements of your movie. 
Use them in the Timeline to 
separate graphic elements from 
animation and scripting 


commands. Use them in the 


Library to sort symbols into 


easy-to-find categories. - 2 Select the Arrow tool and click on the new 3 With the Arrow tool still active, click away from 
rt | Staying in the Text layer, reset the Properties text to select it as an object. Hit Command/ the text so that it is deselected. Next, drag a 
panel so the text size is about 16 points. Click Ctrl+B twice to break the text down into vector marquee around the word ‘about’. Go to 
in the centre of the screen and type in the following paths. Alternatively, you can go to Modify>Break Insert>Convert to Symbol or hit F8 to change the 
text: about | news| contact | archive. Apart twice. text into a symbol. 


Convert to Symbol 


Nene faboubr{ 


Behavior: Movie Cli Registration: 9: 
one a 


eee 


Linkage SEAS Sa 


identiiet [ ag J 
Linkage: [CJ Export for ActionScript 
Export for runtime sharing 
{Import for runtime sharing 
Export fret frame 


UAL ts gels Ne iy apa aa Oe oS 
Source 
Always update before publishing 
File: 
| Symbol Name: Symbol 2 


“about | news | contact | archive 


& 
e 
A 
o 
¥ 
® 
e 
a 
Q 
: y 


jj. @. 


Gg In the dialog that appears name the new 


symbol ‘aboutbtn' and choose Button from Select the first new button, and go to the Double-click on the ‘about’ button, this takes 
the available options. Click OK to finish the Properties Inspector. Replace the text you into symbol-editing mode. Note that there 
conversion. Transform the other words (news, <Instance Name> in the panel with ‘about’. Rename _ are three possible button states — we just need to 
contact and archive) in the same way. the remaining buttons in the same way. add a rollover state. 
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Click in the frame labelled Over. Go to 
Insert>Keyframe. Click on the text to select it. 8 | Now that you've created the rollover states for 9 | To test the rollovers you've just created, go to 


Go to the Properties Inspector and open the Fill all the buttons, drag a marquee around them Control>Test Movie, or choose Enable Simple 
palette. Select a red colour from the palette. Repeat _to select them all. Then, reposition the buttons Buttons from the same menu to take a quick look at 
this procedure for each of the buttons. within the darker green rectangle below the logo. how they work. 
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Part 3: External content 


Make a movie clip that can handle HTML formatting and the external content that will go into it... 


Button mania 


The news, contact and archive 
buttons all function in the same 
way. The easiest way to get them 
working is to paste the script 
from the ‘about’ button, changing 
the specified text file URL to 
news.txt, contact.txt or 
archive.txt for the appropriate 
button. You will need to copy 
them from the cover CD to the 
folder where you save your Flash 
tutorial file for the dynamic 
content to work. 


Action movie 


In our example file we use 
ActionScripting to add content to 
our movie. In most cases you can 
now direct ActionScript events 
that once required the Timeline 
to script. Follow the scripting 
examples and lessons that come 
with Flash to get some idea of the 
rewards you'll get from learning 
how to script. 


Macromedia Flash 
MX: A Beginner's Guide 


Brian Underdaht 
Osborne 

£21.99 

ISBN: 0072222662 


If you have never used any 
version of Flash, this book is for 
you. As its title suggest, this is a 
manual aimed at the complete 
beginner. A great deal of thought 
has gone into its page layout that 
contains all the information you 
will need to become a competent 
Flash user. 

Each of the 14 modules or 
chapters teaches one specific set 
of tools. The author packs in hints 
and tips, and passes on insider 
information that will save you 
hours of frustration. Plus, the 
black art of ActionScript 
programming is also revealed. 
This is h ighly recommended to 
all Flash novices. 


Create New Symbol 


Behavior: @ Movie Clip 
O Button 
O Graphic 


Linkage: 


identifier, [> 


Linkage: [C)Export for ActionScript 
CIE xpott for runtime sharing 


Source 
‘Always updstebetate publishing 


File: 
‘Symbol Name: Symbal 5 


Gg Select Frame 1 in the Dynamic Content layer. 
Go to Insert>New Symbol to create a new 
symbol. Make it a Movie Clip and call the clip 
‘container’. You're taken to symbol-editing mode. 
Select the Text tool. 


4 | Before you return to the main stage, centre 
the text box in the document using the Align 
panel. On the main stage, with the first keyframe of 
the Dynamic Content layer still selected, drag and 
drop an instance of the movie clip ‘container’ to the 
main document. 


This isn't an HTML tutorial, though, so we've 
already created the necessary text files for 

you (they're on the CD). All that remains is to attach 

the scripts that will load these files into the movie 

clip. These scripts will be triggered from the 

navigation buttons we created earlier. 
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In the Properties panel set Dynamic Text and 
click Multiline. Drag out a text box on the 
stage, approximately 680x260 pixels. When you've 
drawn the box, select it with the arrow cursor and 
use the Width and Height boxes in the Properties 

panel to set those dimensions exactly. 


G In the Properties panel, give the clip the 
instance name ‘content’. This clip will be used 
to load HTML formatted content from external text 
files. Before we can do that we have to create the 
text files. You need to use a NotePad in Windows or 
use BBEdit Lite on the Mac. 


Select the ‘about’ button on stage and open 

the Actions Editor (if it's not already open). 
Type the following script directly into the editor in 
Expert Mode: 


on (press) { 
loadVariables(“about.txt”, “_root.content”); 
} 


While you're working in the Properties panel, 

set the font to Arial, size 12 and make sure 
Selectable icon is toggled off. The Render Text as 
HTML icon that is right next to it should be toggled 
on. In the Var field, type dynContent. This is a 
variable we've already embedded in the text files 
we've provided. 


IByncontent=all enquirtes about this site sho got to <a ae 
ref ="mat }to:naboby@madeupemat. com">mat1to:nobobyémadeupemat1.com-</a> 


G Flash's support for HTML is fairly limited. You 
can create hyperlinks with the <A> tag, use 
<BR> and <P> for formatting and use <FONT 
COLOR>, <FONT FACE>, <FONT SIZE>, <I>, <B>, 
and <U> to affect the style of the rendered text. 


” 
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9 | Let's break down what this script does. on 
(press) is pretty obvious. The loadVariables 
command selects some content to load into a 
variable container. The two items in parentheses 
that follow are, respectively, the relative URL to the 
location of a text file (about.txt) and the instance 
name of the movie we're targeting, which is 
contained in the root or main movie. FEES 
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Get started in 
Flash animation 


For years the Web has been moving towards 
more animated and dynamic content. 

Flash enables you to create lightweight 
animations that can bring your site to life... 


lash provides us with tools 
that enable you to animate 
vector and bitmap images 
with ease. This tutorial will 
focus on animating vector objects that 
were drawn by the artist Craig Marshall 
({w] www.logosforhobos.com). You will 
use motion tweens, guided motion 
tweens, and keyframe animation 
techniques to bring to life a character 
walking across the stage. 
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Motion tweening in Flash refers to the 
intermediate steps that are 
automatically generated between two 
keyframes in an animation. Classical 
animators used to draw each frame 
between the two keyframes. Motion 
tweening not only enables us to move 
graphics from one location to another, 
but it also enables us to change the 
object's rotation, speed, opacity and 
scale overtime. 


Part 1: Setting the stage 


Deciding on the dimensions and frame rate of your movie is 
an essential part of beginning any project in Flash... 


Details 


The demo of Flash MX can be 
found on the cover CD. You can 
also buy the full version from [w] 
www.macromedia.com for £433. 


Frames 


The Timeline in Flash is divided 
into frames. Each of these frames 
represents a unit of time. The 
duration of this unit is 
determined by the number of 
frames that are played per 
second (fps). 


Selecting broken 
apart objects 


An object is broken apart if you 
see a dotted pattern in the fill or 
stroke while it is selected. A 
double-click is necessary to 
select both the fill and the 
stroke. A single click in the 
centre of a filled object with 
stroke only selects the fill — 
since strokes and fills are treated 
as separate objects. 


i] Open start.fla from the Tutorial\ 
AnimationFlash folder on the CD. Click on the 
stage. The stage size should be set to 340x280 
pixels and the background colour should remain 
white. The framerate of this movie should remain at 
12 fps. These properties can be set by navigating 
under the menu item Window>Properties, if the 
Properties panel is not currently open. 


4 | We will set up the first keyframe of our 
animation. A symbol or graphic exists by 
default in a keyframe in the first frame of any 
timeline. Move the object off the stage to the left. 
The x and y coordinates in the Properties panel 
should respectively be -170 and 116. 


2] Using the rectangle tool from the tool palette, 
click and drag to create a rectangle. Double- 
click on the centre of the rectangle with your arrow 
tool to change the width and height of the rectangle 
in your Properties panel. This should be set to 


160x150. This will act as a temporary placeholder for 


another symbol already constructed. 


5 | Insert a keyframe in frame 35 by selecting 
frame 35 and then pressing F6. This will create 
another instance of the symbol along with its 
properties from frame 1 (height, width, location, 
etc.). We then must decide what we want to change 
about the instance over time. In this case, we will 
only be changing the location of the symbol in this 
last keyframe. 


= 


With the entire rectangle still selected press F8 

to convert this stage level graphic to a symbol. 
With the convert to symbol dialog box active, select 
movie clip symbol, assign it the name rectangle and 
set the registration point of the symbol to the 
centre. Click OK. Notice that the symbol has been 
added to your library (Window>Library). 


G With the symbol instance in frame 35 selected, 
move the rectangle instance to the right-hand 
side of the stage (coordinates should be 
approximately x: 352; y: 116). We now have our 
initial position set in the keyframe in frame one and 
our final position set in the keyframe in frame 35. 


Part 2: Tweening across the stage 


Flash can automatically generate all the motion between keyframes... 


Motion tween 
golden rules 


Only one instance of a symbol 
(per layer) can exist in any 
keyframe involved in a Motion 
tween - instances of symbols 
animated individually must each 
be ona separate layer. Use 
symbols involved in Motion 
tweens as opposed to grouping 
graphics - this will make them 
more reusable throughout your 
movie and reduce your file size. 


Now we will create a Motion tween to 

generate the movement between these two 
positions. Select the keyframe in frame 1 and look at 
the Properties panel. In the tween drop-down 
menu, select Motion as the tween type. This will 
create a purple arrow between the first and last 
keyframes. If you press Enter or Return, you should 
be able to see your rectangle symbol move between 
the two positions you set for each keyframe. 


2 | Next we will add a background image. Click on 
the Insert Layer button (or navigate under the 
menu Item insert>Layer). This will insert a layer 
above the currently selected layer. Drag this layer 
below the walk cycle layer so that everything on this 
layer will appear behind the walk cycle layer. 
Double-click on the name of the new layer and 
change it to background. 


From your library drag the image called 
3 | background onto the stage. We will use the 
align panel (Window>Align) to align the 
background graphic to the stage. Click on ‘align to 
stage’ and then ‘align top edge' and ‘align left 
edge’. Your background image should now fit 
perfectly on the stage. > 
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Part 2: Tweening across the stage continued... 


Guiding and 
masking 


Guided Motion tween layers 
cannot be guided and masked at 
the same time without the use of 
nested timelines. In other words, 
a single layer cannot have a 
guided and masked property. If a 
layer’s properties are set to 
guided or masked and you wish 
to change this, set its properties 
back to normal, click OK, and 
then modify the layer's 
properties by re-opening the 
dialog box. 


4 | Create another layer and drag this above the 
‘walk cycle’ layer. We will be using this as a 
mask layer. Change the name of the layer to mask. 
Think of a mask as a shape that acts as a window to 
every layer below it. Anything outside of this shape 
is not viewable. 


7 Alternatively, you can also select Test Movie 
located under the menu item Control>Test 
movie. This publishes a SWF file in the same 
location that the authoring file has been saved on 
your local drive. You should notice that movement 
outside the masking shape is no longer displayed. 


Create a rectangle with your rectangle tool 
that is the same dimensions as the stage by 
setting its width and height to 340x280 in the 
Properties panel. Align this to the stage as well. 
Double-click on the icon of this layer to access the 
layer properties. Set this layer as the mask layer. 
This, for the moment, will only change the 
appearance of the icon associated with that layer. 
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8 | Our moving block looks a little lonely. Let's 
give it a companion. Create another layer 


above the mask layer (which will be the top layer in 


the stack) and name it bug. Go to your library and 
drag an instance of the movie clip symbol ‘bug’ 
onto the stage. 


Double-click on the icons for the walk cycle 
G and background layers and change their layer 
properties to ‘masked.’ Notice how these layers 
indent in relation to the mask layer. To see the effect 
of the masking you can simply lock down the three 
layers involved by clicking on the circle directly 
under the lock icon. 


9 | Create a Motion tween for the bug the same 
way that you did for the rectangle instance 
(repeat steps 4-7 above for this symbol, with the 
exception of setting the coordinates for the first 
keyframe to x: -50 and y: 80). 


Part 3: Guiding your tween 


We can also control the path of a symbol during our tween... 


Using the Pencil 
tool to draw a 
motion guide 


The Pencil tool also draws lines 
with sharp angles (straighten 
mode) or ina freehand style 
containing both smooth curves 
and sharp angles (Ink mode). 
Ensure that your line style in the 
Properties panel is set to solid 
or hairline (other line styles only 
increase your file size). 


& We will give this bug a flight path by guiding 
its Motion tween with a simple path drawn 
with the Pencil tool. Create a new layer above the 
bug layer and name this layer guide. Select the 
Pencil tool from your tool palette and set the Pencil 
tool mode to Smooth (under options at the bottom 
of your tool palette). This will enable you to draw 
smooth and curved lines. 
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2 | Draw a simple flight path in the guide layer (it 
is the only thing that exists on this layer). This 
line should begin close to where the bug begins its 
Motion tween in the first keyframe and end near 
the location of the bug in the final keyframe. 
Double-click on the layer icon for this layer and set 
its layer properties to ‘guide’. Set the bug's layer 
properties to ‘guided’. 


3 Select the first keyframe of the bug layer and 

under Motion tween in the Properties panel, 
select snap. This will tell the bug instance that it 
should follow the guided path. Most likely you will 
see the bug's registration point (the white dot near 
its centre) snap to the beginning of the path. Also, 
set ‘ease’ to -100. This will make the bug begin 
slowly and finish its tween faster. 


Adjusting the 
motion guide 


If you would like to adjust the 
path after it is drawn, select the 
line with the Arrow tool and 
under Options in the tool palette, 
select either smooth or 
straighten. You can also deselect 
the line and use the arrow tool to 
modify the curve. Notice how the 
dotted square box changes from 
arectangle to a curve when you 
move the mouse over the line. Be 
careful, however, if you break the 
line into two detached segments 
your guide will not work. If you 
find the motion guide distracting 
during playback in authoring 
mode, you can hide that layer by 
clicking on the dot for that layer 
under the eye icon. 


Keyframe 
animations 


Akeyframe animation contains a 
series of keyframes, each 
representing a different still 
image, that create the illusion of 
an animation sequence when 
played at a framerate of 12 fps or 
higher. Most animation is created 
at 12 fps, whereas, film uses 24 
fps. This walk cycle keyframe 
animation was originally a set of 
Pencil drawings, animated by 
artist Craig Marshall, scanned as 
black and white images, and then 
converted into vector images 
using the trace bitmap 
functionality in Flash. Once 
converted into vectors they 

were optimized and finally 
coloured in Flash. 


Movie clip and 
graphic symbols 


Both movie clip and graphic 
symbols can contain animation- 
whether it is a keyframe 
animation, shape or motion 
tween. This can often be 
confusing for beginners with 
Flash since there can be 
timelines nested inside of each 
other. When a Flash movie plays 
back online, a graphic symbol’s 
animation sequence will 
playback as the movie is 
downloaded. The movie clip 
symbol, however, must be 
completely downloaded before 
playback begins. Movie clip 
symbols are powerful symbols in 
Flash that can contain sound, 
animation, and be controlled via 
ActionScripting. 
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4 | If this did not happen, simply drag the bug to 
the beginning of the path. With the Arrow 
tool, select the bug instance in the final keyframe 
and ensure that the bug's registration point is 
snapped to the end of the guide (if it is not, drag it 
with the Arrow tool). Press Enter or Return to view 
the bug following its new guided path. 


In the Properties panel, click on the button 

named swap. Select the movie clip symbol 
named walk cycle and click OK. The stage should 
update with the new symbol. 


10 | Return to your library and double-click on the 
walk cycle symbol to enter into its Edit Symbol 
mode. Alternatively, you could go to the Edit 
Symbol drop-down and select walk cycle. 


5 | Let's examine the timeline of the pre-made 
symbol containing a walking sequence that we 
will substitute with the rectangle instance on the 
main timeline. Go to the Library and double-click on 
the walk cycle symbol's icon. You are now in edit 
mode for this movie clip symbol. This is known as a 
keyframe animation (see related margin note). 


8 | In the same layer go to the final keyframe and 
select the second instance of the rectangle on 
the stage. Swap this symbol for the walk cycle 
symbol as well. 
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11 | There is an empty layer named ‘soundFX' 
containing two blank keyframes (solid black 
lines with empty circles) already in place. Select the 
first blank keyframe in frame 3 and in the Properties 
panel select rightfoot from the sound drop-down 
menu. This will add sound to the currently selected 
keyframe. Move to the next blank keyframe in 
frame 9 and add the leftfoot sound effect. 
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G Press Command/Ctrl+ E to leave Edit Symbol 
mode and return to the main timeline. 

Move the playhead to the first keyframe in the 
walk cycle layer (unlock the layer first) and 

select the rectangle symbol on the stage with the 
Arrow tool. 


9 | Test your movie (Control>Test movie) and you 
should see everything in action — except some 
sound to really bring our animation to life. What is 
an animation without sound, anyhow? We will add 
some footsteps sound effects to our walk cycle. 


12 | Test your movie to view your completed 
animation. If you ran into any problems you 
can examine the completed file on the CD. Enjoy 
your new Flash animation abilities. EEE 


, oe ee 


58 | Web desion 


Ui 
tg 


P= 


A beginner's gu 


to ActionScript 


Take control of your Flash movies with ActionScript. We'll show you 
how to get started and introduce the basics of Flash scripting... 


lash is the easiest way for 
visual designers to take 
their talent to the Web, 
because it delivers a 
familiar design environment and 
consistent rendering of the final result 
across browsers and platforms. But to 
get the best out of Flash — to deliver 
real interactivity, for example — you 
need to use ActionScript. This feature is 
for people who have learned the basics 
of Flash, but don't yet have any 
knowledge of scripting. 

In this feature, we're going to explore 
why you need ActionScript, what it is, 


and what you can do with it. We're going 
to find out how it integrates with the 
different sorts of objects you create in 
Flash. The aim is to leave you with an 
understanding of the fundamentals of 
ActionScripting in Flash, so that if you 
wish you can go on to explore further 
resources with confidence. 


What is ActionScript? 


ActionScript is a fully-featured 

programming language that’s built into 
Flash. It allows you to issue commands 
to Flash, using simple instructions that 
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we're going to explore ina few 
moments. The syntax (that is, the way 
you phrase your commands) may seem 
strange and probably a bit off-putting at 
first, but it isn’t actually that hard to get 
used to. You'll pick it up quickly once 
you get into what you're doing, and have 
learned a bit more about what you can 
achieve with ActionScript. 


Scripting versus programming 
There isn't really a formal distinction 
between programming and scripting. 
The two are really the same; scripting is 


Getting started — say hello, Flash 


Let's start by getting Flash to say Hito us. Example 1 — Hello World! — displaying the value of a variable... 


Goto Line... 


Find Again 


Open a new movie in Flash and save it as 
test.fla. Select the first keyframe in the main 
timeline and choose Window>Actions. This 
opens the Actions editor where we're going 
to enter some code. This code will be 
executed when the first keyframe loads in 
the movie. 


From the Panel menu, choose Expert mode 
so that we can type freely into the editor 


// this is a comment — don't type it in 
// unless you enjoy typing very much... 
// define a new variable, message 
message = “Hello, World!" 

// show the value of message in the 

// output window 

trace(message) 


Type the parts shown in black into the 
Actions editor. You don't need to type the 
bits preceded by //; these are comments to 
help you understand the code. 

We're going to use the trace() command, 
which writes messages to the output 
window within Flash. The quotes cause the 
text to be displayed exactly as is. 


Hello, World! 


Choose Control>Test scene. Your movie will 
open as a SWF file in a new window within 
Flash and the Output window will open in 
front of it, displaying the text you typed in 
the quotes. 

Adding comments to the code is a good 
way of reminding yourself what each bit 
does. A comment is any text preceded by 
//, up to the end of a line. Comments are 
ignored by Flash. 
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When you're entering ActionScript into 
the movie, you have the choice of working 
in Normal mode, which requires you to 
choose commands from a scrolling list or 
a set of hierarchical menus, or Expert 
mode, which enables you to type freely 
into the code window, as well as choosing 
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So which is better? 

Let’s face it; how many people use Flash 
for Web design because they really like 
typing code? Not many, we suspect. Most 
Flash users — given the choice — would 
rather choose commands from a menu 
than type them in. 

However, for scripting anything more 
complicated than movie navigation it’s 
much easier and much faster to type code 
than itis to enter it from the menus. 
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a kind of programming. However, it’s 
useful to make an artificial distinction 
between the two, because the sort of 
scripting you do in Flash is vastly 
different from what someone is doing 
when they’re writing applications in 
C++ or Java — that’s real programming. 
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and Input text. Dynamic text boxes permit the display of infor 


Open example2.fla from the Tutorial\ 
ActionScript folder on the CD and save it as 
test.fla. We're going to code it so that Flash 
displays a message based on what you 
enter in the Input text box. 
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commands from the scrolling list or menu. 


It doesn't make much difference 
whether you’re an expert user or not; if you 
donit know which commands you need, the 
visual interface in the Actions editor isn't 
going to help a whole lot. The chances are 
you're following some instructions or 
pulling chunks of code out of the manual. 
It's much easier working in Expert mode. 

You can still use the scrolling list or 
menu to cut down on the amount of typing 
you need to do, but you'll find that you feel 
a greater sense of ownership of the code, 
and it will be more controllable. 

So, turn on Expert mode and keep it 
onwhen you're entering code. Switch 
to Normal mode when you want to 
customise the options for a command 
using a visual interface, and when you're 
done switch back to Expert mode so you 
can edit freely again. 
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In real programming, everything has 
to be pretty much defined from scratch, 
but in scripting it's assumed that there's 
an existing environment within which 
you want to apply programming 
commands. There are going to be 
existing things there (buttons, movie 
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g with variables and text field 


Displaying information that we can see when we're working in the project is good, but we nee 


On the stage, there are two text fields; 

an Input text field linked to a variable 
called Input and a Dynamic text field linked 
to output. 


clips, sounds and so on) that you want 
to be able to find out about and affect 
with your commands. 

We need scripting because, without 
it, Flash would just be a graphics tool 
for creating animated movies. And it’s 
unrealistic to expect the users to sit 
through lengthy animations that they 
have no control over. Web users arent 
passive; surfing the Web is an active, 
‘leaning forward’ experience. With 
scripting, Flash enables you to create 
interactive content, where the user can 
influence and direct what happens. 


What can it do? 


ActionScript is tightly integrated with 
objects in Flash. It enables you to 
control many of the attributes of things 
you create, such as size, position, 
opacity and colour. You can make 
objects that detect what the user is 
doing with the mouse and keyboard, 
and write scripts that make your project 
respond appropriately. 

Scripting enables us to create 
functional applications, which can take 
input from the user and do something 
useful with it. It enables us to take data 
from external sources and use it within 
the Flash movie. So, Flash can be used 
as the front end for displaying 
database-driven content, information 
stored in text files, and even structured 
data delivered using XML. 

Flash scripting can be used to add 
functionality to just about anything you 
can think of doing in Flash. Some 
common examples include: 

- Scripted (as opposed to timeline- 
driven) animation 
- Interactive navigation interfaces 
- Data capture forms 
*Games 
* Dynamic charts and 
information graphics 


// define an event handler to detect 

// when the button is clicked 

on (release) { 
// assemble a string using the value 
// of input and assign it to output 
output = “Hello, “ + input + “!” 

} 


Select the blue button on the stage, and 
enter the code shown. As you enter the 
code within the round brackets, a pop-up 
list will appear showing all the events that a 
button can understand. 


+ Scrolling, zoomable maps 

- Multimedia interfaces controlling 
audio and video sources 

- Functional applications, such as online 
ticket reservation systems 


Basic concepts of scripting 


Regardless of the environment you're 
scripting for, there are certain standard 
concepts shared by all programming 
and scripting. 

These are some of the most 
important basic ideas to understand. 
See the examples below for how they 
are applied: 


Remembering information — 

variables and arrays 

We need to store information about 
what is happening in ourscript. To do 
this, we can store information in the 
computer's memory using variables. A 
variable is a named storage location 
that can hold one item of information. 
username = “bob” 

// username now contains the text “bob” 


Sometimes we need to store several 
related values. In this case, we can 
either use as many variables as we 
require, or we can use an array. An array 
isa multi-dimensional variable that 
can hold many numbered values. 

users = new Array() 

users[1] = “bob” 

users[2] = “Sue” 

users[3] = “Ted” 


Making decisions — conditional 

‘if’ statements 

We need to be able to make decisions 
in our script, perhaps based on the 
values of variables, or the 
characteristics of the objects in our 
project. ActionScript provides us with a 
powerful tool for this in the form of the 


d a way to display information to the user. Flash gives us two types of text box that will do this; Dynamic text 


mation, whereas Input text boxes will display the value of a variable as well as enabling the user to change it. Example 2 — Hello someone... 


Hello, Edgar! 


Choose Control>Test movie. 

Your movie will open as a SWF file in a new 
window within Flash and the Output 
window will open in front of it, displaying 
the text you typed in the quotes. 


The Flash Movie Explorer showing objects in 
the project with associated code. 


‘if statement. Using an ‘if’ statement, we 
can test the value of a condition and 
decide whether or not to execute a set 
of steps. 
// this code could test the value of username 
to allow a user to log in 
if (username == “bob”) { 

logged_In=true 
Jelse { 

logged_In= false 
} 


Repeating steps as often 

as required — looping 

The ability to repeat a set of 
instructions over and over is one of the 
most powerful features of scripting; we 
accomplish this using loops. There are 
two main looping commands that we 
can use; for loops and while loops. For 
loops will execute a series of steps a 
certain number of times; we use these 
where the number of loops can be 
determined in advance, or where we 
need to use a counter within the steps 
to be executed. 

// this code would print the numbers 0 to 9 in 
the output window 


While loops execute forever until a 
condition becomes either true or 
false. We use these loops when the 
number of repeats cannot be 
determined in advance. 
//this code would move an object called 
boulder down the screen 
// the user would not see the object move 
down, though; 
/7/it would jump from the top to the bottom in 
one go 
// because all the code is executed before 
Flash draws to the screen 
while (boulder._y < 350) { 

boulder._y +=10 
} 


Reusing instructions — functions 
We often find ourselves, essentially, 
needing to use the same series of 
commands several times within a 
project. While we could copy and paste 
code where it’s required, this makes 
it harder to maintain and understand 
the code. Instead of repeating the code, 
we can build reusable sets of 
instructions, called functions. A 
function can be defined once and then 
used as often as required. This means 
that you can edit and understand the 
code more easily. 
// 
this function would move a movie clip called 
missile across the screen 
when it went past 500 pixels, the function 
calls another function resetMissile, which 
would move the missile back to the left again 
th 
function moveMissile () { 

missile._x += 10 

if (missile._x > 500) { 


for (i=0; i<10; i++) { resetMissile() 

trace(i) } 
} } 
‘Sti enema 


Working with movie clips 


Now, we're going to try something a little more interesting. Movie clips are usually the objects we use to implement functionality within Flash. In this simple example, we'll cause a movie clip to move 


across the screen without using tweened animation. Example 3 — Using onClipEvent with a movie clip 


Open example3.fla from the Tutorial\ 
ActionScript folder on the CD. On the stage 
is an instance of a movie clip symbol that 
simply contains a box with a stroke. 


// detect a key being pressed 
// on the keyboard 
onClipEvent (keyDown) { 
// increase the x coordinate of the 
// movie clip by 10 pixels 
this._x += 10 
} 


Select the box and enter the code shown. 
Using onClipEvent(keyDown), we can 
detect when any key is pressed on the 
keyboard. Choose Control>Test movie. In 
the Test Movie window, press the Space bar 
repeatedly. The box will move across the 
screen. Close the test window once you've 
seen enough. 
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Keyframes with Actions applied to them are shown in the timeline with an ‘a’ in them. 


Entering and locating 

code in Flash 

One of the most challenging 
considerations when scripting in Flash 
is the question of where to put your 
code, and one of the most difficult 
things when looking at someone else's 
work is trying to find the code that they 
have used. 

Code in Flash is generally applied to 
the object that it relates to, orto 
keyframes ina timeline. There can bea 
large number of different timelines and 
nested objects, and code can be 
scattered through the project like 
grains of sand. 

This means that there is no single 
place where all the script can be 
viewed in a meaningful way. Instead, 
one way to find out what's going on in 
a project is to carefully deconstruct it, 
by double-clicking symbol instances 
to find out what's in them, and 
checking every button and movie clip 


// detect the playhead entering frames 
// in the timeline of the movie clip 
onClipEvent (enterFrame) { 
// increase the x coordinate of the 
// movie clip by 10 pixels 
this._x+=10 
} 


Select the box and edit the code as shown. 
Using onClipEvent(enterFrame), the 
movement of the Timeline of the movie clip 
drives the code, causing the statements 
within the curly braces to be executed at 


the frame rate. Choose Control>Test movie. 


The box will move across the screen 
automatically. You can change its speed by 
changing the number after the equals sign. 


symbol instance to see if it has any 
scripting applied to it. Keyframes with 
code applied to them showa little 
lowercase ‘a’ in the Timeline, so they 
can be found without needing to check 
every keyframe. 

A useful alternative is to use the 
Movie Explorer to find scripts in the 
project, but the Movie Explorer has 
some limitations in how it displays the 
relationships between objects. And, 
although it can help you to find scripts 
easily, it usually isn't much help in 
understanding the overall picture of 
what is going on. 


Deciding where to apply 
scripting in a movie 

The choice is essentially a simple one; 
you generally apply code to individual 
keyframes in any timeline (except that 
of a button symbol), or to instances of 
button symbols. Just select the 


The second technique, using enterFrame, 
works because although the movie clip has 
only one frame in its Timeline, the Timeline 
is playing and looping on that single 
keyframe. If there were actions in that 
keyframe, they would be executed only 
once, but using enterFrame enables us to 
capture the event as the timeline enters the 
first frame each time it loops. 


Get started 


_alpha controls the opacity of the movie 
! clip. Values range from 0 to 100. 

| _eurrentframe returns the number of the 
i frames in the movie clip timeline that the 
playhead is currently on. 


slash syntax to the movie clip instance 
that the current movie clip has been 
dropped on when dragging and dropping 
movie clips. 

_framesloaded returns the number of 


from disk or the network. 


instance on the stage in pixels. 


keyframe or button instance you want 
to work with, open the Actions editor 
window and start typing. There's no 
need to close the Actions editor once 
you've finished applying the code. 

But how do you decide whether to 
put the code ona keyframe ora button 
instance? You need to consider whether 
you want the code to be executed 
automatically when a timeline reaches 
acertain frame, or you want the user's 
actions to trigger the code: 

* If the code is to be triggered 
automatically, you usually put it ina 
keyframe of the main timeline ora 
keyframe in the timeline of a movie 
clip symbol. 

- If the code is to be executed when the 
user does something, apply your code 
to an instance of a button symbol. In 


_droptarget returns a reference in Flash 4's 


frames currently loaded as a movie streams 


| _Lheight controls the height of the movie clip 


Movie clips have many useful properties that can be set through scripting. 
Here's a description of some of the most useful ones... 


__name returns the instance name of the 
movie clip instance. 

_rotation controls the rotation of the movie 
clip instance on the stage in degrees. 
_totalframes returns the total number of 
frames ina timeline. 

_visible controls the visibility of the movie 
clip. Can be set to true or false. 

_width controls the width of the movie clip 
instance on the stage in pixels. 

_x controls the horizontal position of the 
instance relative to the top-left corner. 
__xmouse returns the horizontal position 
of the mouse cursor relative to the movie 
clip’s registration point. 


Lebanon ose" 


this situation, you'll need to use an 
event handler statement which tells 
Flash which specific user action is to 
trigger the code: 
on (rollover) { 

infopanel._visible = true 


} 


When you're applying actions ina 
timeline, you can apply them to any 
keyframe in any layer. This can make it 
really hard to find them again, so it’s 
considered good practice to create a 
layer called Actions at the top of the 
layers list and apply all the 
ActionScript code to keyframes in 
that layer. 

You can also apply code to instances 
of movie clip symbols. This enables you 
to execute some code based ona wide 


Creating semi-intelligent movie clips 


Games in Flash often use semi-intelligent movie clips to create the action. We'll scripta missile such as might be used in aspace game. Example 4 — Using 


Open example4.fla. On the stage is an 
instance of a movie clip symbol of a missile. 
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Double-click the instance of the missile and 
look at its timeline. There is a frame on the 
actions layer with code which defines three 
functions — have a look at them in the 
actions window. 
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_xscale controls the horizontal scaling 

of the movie clip. The _xscale clip uses 

a value which is based on a percentage 

of the original dimensions of the movie clip. 
_y controls the vertical position of the 
movie clip instance relative to the top left 
corner of the stage. 

_ymouse returns the vertical position of the 
mouse cursor relative to the movie clip’s 
registration point. 

_yscale controls the vertical scaling of the 
movie clip. The _yscale clip, like the _xscale 
clip, uses a value which is based ona 
percentage of the original dimensions of the 
movie clip. 
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range of different events. Actions 
applied to a movie clip instance must 
be enclosed inan onClipEvent 
statement, for example: 
onClipEvent (enterFrame) { 

this._x+=10 


Object-oriented scripting 


ActionScript uses object-oriented 
programming principles. This is a 
surprisingly simple way of thinking 
about the data and functionality of 
your project. In object-oriented 
programming, we consider the things 
that we are dealing with in our scripting 
environment to be imaginary objects. 
An object bundles all of the 
information about something into a 
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function moveMissile() { 
this._x += speed; 
checkPosition(); 


} 


The first function moves the missile to the 
right by adding on the value of a variable 
‘speed’. This hasn't yet been defined. Each 
time it moves the missile, this function calls 
another function to check the position of 
the missile 
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single package, making it easy to keep 
track of what’s going on and to change 
things as needed. 

Like things in the real world, 
programming objects can have 
attributes (properties), things they can 
do (methods), as wellas the ability to 
respond to changes in their 
environment (events). 

Objects you create in Flash have 
properties that you can read or change, 
such as the position, width and height 
of a movie clip instance. They can have 
methods that you can use to make 
something happen, such as the ability 
of a sound objectto play its sound. They 
can respond to events, such as the 
ability of a button object to trigger 
some code when the mouse rolls 
across it. 

What makes scripting in Flash so 
easy is the fact that all of the 
programming objects you need to use 
are already defined for you. All you 
need to do is to find out what objects 
are available for use, what properties, 
methods and events they support, and 
how to refer to them. This information is 
referred to as the Flash object model. 

The Flash object model describes 
properties, methods and events for all 
of the scriptable objects within the 
Flash environment, including buttons, 
movie clips, sounds and so on. You can 
explore the Flash object model through 
the scrolling list in the Actions editor, 
but if you want to learn more about it 
you can use the reference material in 
the online help. Or, work through 
examples in some of the excellent 
books that are now available on Flash. 

Not everything you create as artwork 
in Flash can be scripted; in fact, most 
things can't be seen by scripting. The 
most useful object from a scripting 
point of view is the movie clip. You can 


‘functions’ and ‘if’ statements 


function checkPosition () { 
if (this._x>500) { 
resetMissile() 
} 


} 


The second function checks the position of 
the missile using an ‘if’ statement. If the 
result of the ‘if’ statement is true, then the 
third function is called to reset the position 
of the missile. 
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find out about and change most of the 
properties of a movie clip symbol. To 
work with other objects, you enclose 
them in movie clip symbols. 
Referring to objects 

To change the characteristics of 
something, you need to be able to refer 
to it in your script. This requires that you 
give names to the instances of things 
you want to work with. In practice, the 
things that you need to name to referto 
in your scripts are: 
- Keyframes, which are given unique 
labels for timeline navigation 
- Variables, arrays and functions, which 
are each defined using a unique name 
within a given timeline 
* Text fields, which can have their own 
names as well as being bound to the 
values of variables 
* Movie clip instances, which are the 
objects most capable of being affected 
by scripts. 


To referto a named object, you can 
simply use its name if you're referring 
to it within the same timeline or object. 
If you're referring to something from 
another timeline or from inside a 
different object, you need to describe 
to Flash how to find the containing 
timeline or object as well as naming the 
thing you're after. This is done using dot 
notation. Here are some examples: 
‘ball — this is a reference to a 
variable or movie clip called ball in 
the same timeline 
* ball__height — a reference to the 
built-in height property of a movie clip 
called ball in the same timeline 
* _parent.ball._height — a reference to 
the built-in height property of a movie 
clip called ballin the timeline one level 
up from where the script is located 
*_root.ball._height — a reference to 
the built-in height property of a movie 
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function resetMissile () { 
this._x = 10; 
this._y = random(160) + 30 


} 


Open example4.fla from the Tutorial\ 
ActionScript folder on the CD. On the 
stage is an instance of a movie clip symbol 
of a missile. 


clip that is called ballin the main 
timeline regardless of where the script 
is located. 

One of the most common reasons 
fora script not working is that the 
object you're referring to is ina 
different timeline, and you haven't been 
referring to it correctly. The above 
examples may help you to work out that 
sort of problem. 

Some of the examples that we have 
used above use special references to 
the main timeline (_root) and to the 
parent timeline (_parent), which is 


the timeline one level up from the 
present location. 

Another useful reference is ‘this’, 
which refers to the current timeline 
when code is executed within a movie 
clip. This makes it easier to write 
portable code, by avoiding references 
to individual names. 


Next steps 


Hopefully, this piece has helped to 
explain some of the reasons why we 
want to do scripting in Flash and the 


One of the difficulties in learnin 
punctuation characters are use 


confusing and what they mean within ActionScript... 


= Becomes equal to. Sets the value of a 
j property or variable. The expression to the 
right is evaluated and the result is assigned 
to the object on the left. 
e.g. distance = movie._width + 34 
+ Addition or concatenation. Either adds the 
expression on the left to the expression on 
the right arithmetically (if they are both 
numbers) or joins the results of the 
expressions as text (if one or both are text) 
e.g. totalCost = price + delivery + vat 
or fullName = firstName + ““+ LastName 
* Multiply. Multiplies the expression on the 
left against the expression on the right and 
returns the result. 
e.g. distance = movie._width* 3 
/ Divide. Divides the expression on the left 
by the expression on the right and returns 
the result. 


onClipEvent(load) { 
speed = 10 
} 


Double-click the stage to return to the main 
timeline. We're going to add some code to 
the instance of the movie clip called ‘missile’ 
on the stage. Make sure the movie clip 
instance is selected, and open the Actions 
editor. Type the code shown. This sets the 
value for speed when the movie clip first 
loads on the stage. 


e.g. distance = movie._width / 10 

> Greater than. Tests to see if the expression 
on the left is greater than the result of the 
expression on the right and returns true or 
false as a result 

e.g. if (this._x > 500)... 

== Is the same as. Tests to see if the result of 
the expression on the left is the same as the 
result of the expression on the right 

e.g. if (username = “bob”... 

+= Addition and assignment. Adds the result 
of the expression on the right to the current 
value of the expression on the left, and sets 
the new value of the expression on the left to 
the result. 

e.g. this_x+=10 

0 Round brackets. Used to group statements 
together so that they are treated as one. 
Found with ‘if statements, and also to make 


onClipEvent(load) { 
speed = 10 


} 


onClipEvent (enterFrame) { 


moveMissile() 


Add the next piece of code shown. This 
uses enterFrame to capture the movement 
of the playhead within the movie clip, and 
executes the moveMissile() function. 
Choose Control>Test Movie, and you'll see 
the missile move across the screen. When it 
reaches 500 pixels, resetMissile is called and 
it resets the position of the missile. 


examples have shown you how to 
implement some simple scripts of 
your own. 

To build on what we've covered 
throughout his feature and to put what 
you've learnt to the test, visit these sites 
for tutorials and walkthroughs: 

[w] wwwlashkit.com 

[w] wwwlashzone.com 

Fora more detailed introduction to 
ActionScript, take a look at 
ActionScript: The Definitive Guide by 
Colin Moock, which is published by 
O'Reilly Associates. fey 


8 ActionScript lies with the way that conventional English 
d. This table explains some of the characters that can be 


the order of calculations clear within an 
expression. Also found with function names, 
where they can contain parameters which 
need to be passed to the function 
e.g. if (this._x > 500)... 
or resetMissile() 
{} Curly braces; used to delimit a statement 
block. Found following many commands 
such as ‘if’, ‘for’, and ‘function’ to describe 
the statements to be executed by the 
command. Usually written out on separate 
lines for clarity. 
e.g. if(a>b){ 

«Statements go here on multiple lines... 
} 
// Comment delimiter. Flash ignores 
everything on a line following ‘//’. Use this 
to make notes for yourself or other people 
using your project 


onClipEvent(load) { 
peed = 10 

} 

onClipEvent (enterFrame) { 
moveMissile() 


} 

onClipEvent(keyDown) { 
speed += 10 

} 


Finally, we'll give the user a way to increase 
the speed using the keyboard. In this simple 
example, we'll increase the speed when any 
key is pressed. Enter the code shown into 
the Actions window for the movie clip 
instance. Choose Control>Test movie and 
try it out. 
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Dene 
Computer Arts Special 

100% Photoshop — COSB0030 
Awhole issue dedicated to Adobe 
Photoshop. \ncluded is an eight- 
page in-depth PS7 review where we 
test every new feature of the 
application. If you use Photoshop 
for online images, then you'll need 
our 50 Web graphics tips. Learn the 
art of Scanography with this 
month's cover designer, David 
Newton. Plus, 37 pages of tutorials 
covering PluginMagic, 3D textures, 
animation and much more. 

CD A full version of PluginMagic vol 
1, 10 royalty-free images worth 
£1990, 1250 Photoshop filters. 


All ki 


Computer Arts Special 

100% Flash - COSB0031 

This issue covers all things Flash, 
including a massive 30 pages 
dedicated to Flash Mx. Also in this 
issue: 38 pages of hot new 
tutorials, covering video, 
screensaver creation and handheld 
game design; 101 Flash tips; the 
new powers of Flash’s coding 
language, ActionScript; an in-depth 
seven-page review of Flash MX; and 
a free 36-page Flash sampler book 
from Friends of ED. 

CD Flash MX demo (dual), Flash 5 
(dual), plus £300 of extras from 
Graphicscene and Web Foundry. 


ai'ts specialBACk ISSUES 


ar issue fo 


yr the rest of th 


Computer Arts Special Digital 
video techniques — COSB0032 
This complete 100-page guide to 
digital video provides you with all 
you need to master creative editing, 
effects and movie making. Included 
in this issue: 50 hot camerawork 
tips; the best hardware and 
software guides; 25 pages of 
essential tutorials, from colour 
retouching to titling; learn how to 
make a claymation film in Premiere; 
and a guide to what's hot in the 
new releases on the DV scene. 

CD A full version of EditStudio 1.5 
(PC), plus demos including After 
Effects 5.5 and combustion 2. 


Computer Arts Special Design 
brilliant Websites — COSB0033 
In this 100-page guide to Web 
design, we show you how to design 
better Websites. Included in this 
issue: in-depth reviews of 
Dreamweaver MX and Fireworks 
Mx; create sites that sell; learn all 
there is to know about PNG; and 11 
brand-new tutorials on lip-synching 
in Flash, setting up a Web server, 
creating Flash components and 
using Web Menu Builder, 
Dreamweaver MX and GoLive 6. 
CD A full version of Web Menu 
Builder (PC), 1510 Photo-Objects, 
plus demos including GoLive 6. 


Computer Arts Special 
Photoshop — COSB0034 
Included in this 100 per cent 
Photoshop issue are eight brand 
new tutorials. These cover painting 
in PS7, amazing scanning tricks, 
Photoshop's top 12 filters, and 
create the the cover image with our 
tutorial on special colour and print 
techniques. Also in this issue, 54 
expert tips, learn all there is to 
know about Photoshop PDFs and 
an in-depth hardware guide to help 
you choose the right equipment. 
CD The full version of Dreamy 
Photo (dual) with the complete 
DreamSuite plug-in, PS6 demo . 


Issue 69 — Code CA069 

Design for DVD 

CD ///ustrator 10 (dual), U/traDev 
4 demo (dual), Ree/DVD 2.5 (PC). 


Issue 70 — Code CA070 

Think Big 

CD Full Flash Toolbox Lite (dual), 
Flash MX demo, DeBabelizer 5 Pro. 


<omputer 


art: 


turn an 

ANY objec, 
‘Mo digi, YOce 
= Se Se tipi?) 


Issue 71 — Code CA071 

Turn any object into digital art 

CD Full D Sculptor (PC), Maya PLE, 
Dreamweaver MX and Fireworks MX. Mx, Toon Boom Studio 2, Poser 4. 


Issue 72 — Code CA072 
Photoshop 7 tricks 
CD Dreamweaver Mx, Fireworks 


+44 (0) 1458 271 108 


take out a subscription — see page 53 


Get started 


Issue 73 — Code CA074 
Cutting-edge Flash 

CD LiveStage Pro 2.1 (full), Flix 1.0 
(full), Flash MX, After Effects 5.5. 
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Win [procreate Fainter 7] 


It’s complez. It’s challenging, But few things are as rewarding in the world of digital 
creativity than mastering the third dimension and rending your own 3D imagery... 


ften, it seems like 3D graphics is more like a 
field of science than an art form. Involving 
oodles of maths, plus healthy servings of 

fj optics, fluid dynamics, kinematics and more, 
working in 3D might just make your brain boggle. But if 
you can master the basics, the rest follows and your 
creativity can flow, making it a rewarding process. 

One thing some companies developing 3D software 
have done is to simplify the way their software works 
by making the interfaces easier to use. [wo great 
examples of this are Bryce and Poser. Bryceis 


6g Getting started in Bryce 5 
72 Getting started in Poser 4 


FZAcetting started with 
D Sculptor and Bryce 
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fundamentally a program for creating 3D terrains and 
scenery, but it has become a more general purpose 3D 
program on the way, and can be used for the modelling 
of basic shapes (other than mountains). Poser, as its 
name suggests, is for creating, posing and animating 
human characters in 3D. Both applications have 
interfaces that are designed to be user-friendly, with 
all the main tools and settings at hand, and the 
complex stuff hidden away in the background. 
Whether these interfaces work for you may be a 
matter up for debate, but both have proven very 


popular with Computer Arts and Computer Arts 
Special readers over the years, and we've provided 
tutorials for the programs right here. In addition, we've 
brought you something that makes it far easier to 
create 3D models in the form of D Sculptor, on our CD. 
In fact, you don't need to modeLat all. With D Sculptor 
you can turn everyday objects into 3D ones using just a 
digital camera and the program. It’s a captivating 
process, you could say, and is lots of fun too. In our 
third 3D tutorial we'll combine the use of D Sculptor 
with Bryce to create an image. EE 
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Getting started in Bryce 5 


The whole area of 3D is a tricky one. We show you how to get 
to grips with one of the world's most popular 3D applications... 


ryce Sis an excellent 3D 
rendering and animation 
program, designed to be 
easy to use. It’s intended 
mainly for the creation of 3D landscapes 
but you can also model ordinary objects 
with it. Unlike most programs, Bryce 
hides the names of most of its 
commands and tools, which makes it 
tricky to learn at first. This interface style 
encourages experimentation, so don't be 
afraid to dive straight in. 

In this tutorial we'll get you on the fast 
track to creating your own high-quality 
3D rendered images. Just follow the 


steps and use the scene files supplied on 
the CD. We'll create a scene featuring an 
ancient stone monument, building it 
from scratch using Bryce's built-in 
primitive shapes and Boolean rendering 
features. With these you can create 
scoops and champfers, and cut holes in 
other objects to create much more 
complex models. 

It’s fairly simple but as things get 
more complicated it can become 
difficult to manage and select the 
objects in the scene. To help you we'll 
show you a number of different ways you 
can manage the objects in your scene. 


Part 1: Enter the world of Bryce 5 


First, we'll take a look at the user interface offered in Bryce 5, and begin to find out how it works... 


Details 


The demo version of Bryce Sis 
onthe CD. You can buy the full 
version from Corel for £229. 
[w] www.corel.com. 


Get back 


If you get lost you can click the 
small grey triangle next to the 
View Selection icon (at the top 
left edge of the main view) to 
access a pop-up menu. Choose 


Reset Views to return everything 


back to where it was. 


1 | After installing Bryce, locate and launch the 
application. This is what you should see after a 
few seconds — the default Bryce interface. Small, 
isn't it? Let's make it a bit bigger so that we have 
some more space to work in. 


Move your mouse to the top of the screen and 
the Menu bar will appear. Select Document 
Setup from the File menu, then in the small dialog 
that appears enter your desired document size. 
We've entered 1024x768, which fits well on a 
17-inch monitor. Click the small tick at the bottom 
right to accept, and the interface will resize itself. 


The interface is pretty simple. Down the left 
edge are the View controls and Render 
preview buttons. To rotate the view, drag on the big 

silver ball; to move the view use the cross-shaped 
buttons. You may also hold the spacebar and drag in 
the view to move it. Space+Alt-drag in the view to 
rotate using a mini-preview pop-up. 


Part 2: Creating and editing terrains in Bryce 5 


It's time to lay down the basics of a landscape. Here's how you do it... 


Faster previews 


To speed up preview rendering, 
activate Fast Preview mode by 
clicking the button immediately 
to the left of the Render button. 


Wireframe view 


After a render is complete you 
can get back to Wireframe view 
by clicking on the small grey 
cube on the right-hand side of 
the interface. 


— —— 


At the top of the interface there are three 

menus: Create, Edit and Sky & Fog. Click 
Create to show the icons for creating objects and 
lights in Bryce, then click on the mountain (Terrain). 
A red mountain-shaped object appears in the centre 
of the scene. Holding the spacebar, pan the view up 
to centre the mountain in it. 


4 | Now for some selection practice. At the 
bottom-right corner of the screen is a button 
that toggles the selection and animation controls. 
Click it so that the Selection buttons are displayed (a 
row of object icons). You can select certain object 
types using these icons. To select the floor plane 
click the Floor button; to select the terrain click the 
Terrain button, etc. This can be a lot easier than 
clicking in the main view, especially when there are 
many objects in the way. 


ove 

Notice that there is a Nano Preview at the top- 
left of the interface which constantly displays a 

rendered view of the scene. To Preview Render in 

the main view click the centre silver ball in the group 

of five in the Views palette (far left below the large 

Camera Rotate ball). It's not too exiting, so let's add 

some texture to the mountain. 


Go to the Create menu and click to create 

another terrain. Now this time click and hold 
the Terrain icon in the Selection panel. Now that 
there is more than one of that object type, a pop-up 
menu appears where you can scroll to select the 
correct object. Use this menu to switch between the 
two terrains. Select Terrain 2 and hit the Delete key 
to remove it from the scene. 


Materials 


Click the Edit menu at the top of the interface. 
The render should disappear, leaving the 
mountain still selected. If not, click on it in the view 
to reselect it. Click the small triangle to the right of 
the Edit menu to open the Materials browser. Select 

Planets & Terrains from the list at the right then 
choose a terrain texture. We've selected 
Mediterranean Hills. Click the tick to accept and 
re-render the view. This stage is saved as 1 Terrain 
on the CD. 


2 ee 


G Select Terrain 1. Now switch to the Edit menu 
to display the editing tools. You can move and 
scale objects by dragging on them in the view, or 
you can drag the handles of the second, third and 
fourth icons (Scale, Rotate, Move) in the Edit panel. 
Experiment moving and scaling the terrain using 
both methods. Here we have moved, scaled and 
rotated the terrain just in Y direction (vertically). > 


Get started 


Part 3: Building up objects 


Now we'll show you how to create a Greek column using Bryce's Boolean groups... 


Just experiment 


If you don't know what something 
in the interface does just click on 
it- it'll do something. If what it 
does isn't something you're 
interested in, just undo it by 
pressing Command/Ctrl+Z. 


Bank on it 


The two small buttons above the 
main view control affect View 
Banking (tilt) and Field of View. 
Adjust these to get exaggerated 
perspective for a more ominous 
render effect. 


Cloudy on 
the details 


Aninfinite cloud plane has been 
added in the final render and 
moved up above the mountains 
to add some extra cloud detail. 
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re] Although Bryce is typically used for creating 
landscapes, we're going to leave that part for 
now and, using its primitive objects, build an ancient 
monument. Begin by adding a cylinder from the 
Create menu. Then select the terrain and move it 
backwards into the distance. 


Zoom in on the scene and move it so that the 

two cylinders are central. With the smaller one 
selected, click the A icon to open its Attributes. 
Now, we are going to move its origin (or pivot 
point) without actually moving the cylinder itself. In 
the Attributes click the Show Origin option then, 
most importantly, click the small red padlock. Enter 
the value 0 into the first (X) and third (Z) fields of its 
Origin attribute. 


In the dialog box that appears enter 9 for the 

number of copies (plus the original makes 10 in 
total), and 36 in the Y rotate field (360 degrees 
divided by 10). Make sure the Offset fields are all 0, 
and Scale is 100 per cent. Click OK. You should see 
this array of cylinders. 


Scale the cylinder by dragging on the top- 

centre dot of its bounding box (or use the 
handle of the Scale icon in the Edit palette). If you 
click on the A icon next to the bounding box you 
can display precise numerical values for Scale, 
Rotation and Position. 


5 | Click OK. Notice a green dot has appeared in 
the centre of the first cylinder connected to the 
thin cylinder by a line. If the thin cylinder moved, 
you didn't unlock the Origin and Position fields first. 
Undo (Command/Ctrl+Z) and try again. This step is 
saved as 2 Origin on the CD. 
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8 | Next, Shift-select the original thin cylinder, 
which should be grey and unselected. Be 
careful not to select the infinite plane behind it as 
well. If it becomes selected accidentally just Shift- 
click it to remove it from the selection. Click the A 
button and check the Negative option. 


Duplicate the cylinder by pressing Command/ 
Ctrl+D. Scale the duplicate uniformly by 

dragging on one of its top corner handles, then 

scale it in Y so that it's long and thin. The next step is 

a little tricky so be careful. Switch to Top view by 

either dragging on the Select Views control button 

at the top-left of the interface (right below the 

Nano preview), or by selecting it from the pop-up 

menu just to its right. 


Bosse cade ene! 


G Switch back to the Director's View and rotate 
the thin cylinder around the Y axis (by 
dragging the horizontal blue disc on the Scale tool 
in the Edit palette). We've moved its centre point, 
which is essential for the next step. Move your 
mouse up to the top of the screen so that the 
system menu appears, and from the Edit menu 
choose Multi-Replicate. 
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9 | If you Control-click in the view over the objects 
you have a further selection method. A menu 
pops up listing the objects below the mouse pointer. 
Select Cylinder 1 (the large cylinder), click its 
Attributes icon (A) and set it to Positive. Finally, 
select all the cylinders and create a group by clicking 
the G icon. This step is 3 Group on the CD. 


Part 4: Adding the details 


We'll make the columns more realistic with a few methods to add greater detail... 


Colour and 
brightness 


Adjust the Sky Dome colour (the 
small colour swatch below the 
Cloud Density section of the 
Clouds & Sky palette) to adjust 
the overall brightness. 


More mountains 


Add some extra mountain 
terrains in the distance, scaled 
up. This will increase the sense of 
depth and scale in the image. 


i The base and top of the column are built in a 
similar way. First, a cube is created and scaled 
in Y-space. Then a torus is added. The torus is 
rotated 90 degrees by typing 90 into its X rotate 
attribute (click its A icon) then it is moved vertically 
(by holding the Option/Alt key while dragging) so 
half of it is above the cube. Click the E button and 
drag in the palette to narrow the tube diameter of 
the torus. 


A cylinder is added and scaled in Y to fit above 

the cube. The torus is duplicated (Command/ 
Ctrl+D) and moved up in Y so it overlaps the top of 
the cylinder. The torus is set to Negative mode and 
the cylinder to Positive, then they are both selected 
and grouped to create the Boolean scallop. Control- 
clicking enables you to select inside the group so 
you can scale/move the torus until the correct 
scallop effect is created in the cylinder, 


3 | The first torus is duplicated once more and 
moved up to the top of the cylinder then scaled 
down to fit. It is duplicated again and moved to add 
some more detail. All of the items are selected 
(except the floor) and grouped. You can duplicate 
this and position it at the top and bottom of the 
column. This step is saved as 4 Column on the CD. 


Part 5: Texturing and rendering 


This is the nitty-gritty of 3D work — getting your creation to look just right when you render it... 


Real World Bryce 4 


Peachpit Press 

Susan A. Kitchens & Victor 
Gavenda 

£41.27 

ISBN: 0201354381 


One of the best manuals 
currently on the market for 
Bryce. This comprehensive 
manual dissects each of the 
fundamental tools you will need 
to master as you move through 
each chapter that each build to 
form a cohesive tutorial and 
reference source. 

On the CD, QuickTime movies 
explains clearly some of the 
more complex features such as 
volume materials and Sky Lab. 
Also included is a full-colour 
section that rounds out a guide 
that will not only get you up and 
running quickly, but also show 
you what this program can really 
achieve. If you have Bryce, or are 
thinking of installing it, this is a 


must-have book. 


ee The rest of the facade is created using the 
same methods of Boolean grouping primitives. 
Open the file 5 WholeModel on the CD. This is the 
completed column model. Select the group and click 
the M icon to enter the Materials Lab. Here we can 
create a surface texture. Click the triangle to the 
right of the Preview Render to open the presets. Use 
Eroded Granite from Rocks & Stones. 


ShER Too 


4 | Scale up the terrain and move/rotate it so that 
the flat area you painted is below the column 
model. This creates a pleasing backdrop to the 
scene. Switch to the Clouds & Sky menu to edit the 
atmosphere. Get a good camera angle first so that 
you can see the sky above the mountains. 


.2] Scale the texture by clicking the green button 
at the top-left of the texture swatch to the 
top-right to open the Edit Texture panel. Drag the 
Scale icon to scale the texture to about 100 per 
cent. Click OK to accept the material 


G Begin editing by lightening the shadows: drag 
on the Ambient/Shadows icon (second to the 
left in the Clouds & Sky palette) - about 45 should 
do. Drag in the Cloud Height icon to raise the clouds 
and also reduce the Haze to about 5. Drag in the 
Sun Ball to position the sun, and in the Clouds graph 
to change the frequency and density of the clouds. 
We've also added a small amount of ground fog to 
give the impression of morning mist. 


Select the terrain and click the E icon. This 

enters the Terrain editor, where you can paint 
the height of the terrain using values of grey and 
apply special effects to basically sculpt the 
landscape. The toolbar enables you to set the size of 
the Brush, Flow, Height and Terrain resolution. Click 
the grid at the bottom of the toolbar and set the 
Resolution to 512x512. Paint in one corner with a 
dark grey then click and drag on the Elevation tools 
to blend the result 


G The only way to get to know theses features is 
to play with them, so spend some time 
experimenting. Or try some of the presets by 
clicking the triangle to the right of the Clouds & Sky 
menu. The small buttons next to the Sun Control 
enable you to save and recall your own presets. You 
can't render to disk with the demo but you can save 
a screenshot of your finished Preview Render. (Ona 
Mac that's Command+Shift+3; on on PC use the 
the Print Screen button then paste into an 
appropriate image-editing application). The final 
scene is called 6 Finished on the CD. EEE 
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IL, Expertise by George Cairns. 

=] George has used Poser fora 
variety of projects from 
creating WW2 Gis to flesh- 
eating zombies. You can 
contact George at [e] 
george@georgecairns.com or 
[w] www.georgecairns.com. 


Files on disc 

All files for this tutorial are in 
the tutorial Poser folder on 
the CD, Also on the CD is Poser 
Propackwhich includes the 
demo of Foser 4. 


Creating 3D graphics 


Getting started in Poser 4 


Can't draw or model human characters? Need them for a project? 
We'll take you through the a pain-free way of creating and 
customising human characters using Poser 4... 


==—q_rom book covers to 

F magazine subscription 

A adverts, many projects need 
ae a human figure to sell them. 

The human figure is always a challenge 

to modelin 3D applications, and 

positioning it into different poses is even 

more of a nightmare. 

If you ask for a dinosaur ora 
spacecraft, it can easily be created ina 
3D application. But, if the project needs 
a human character, your first choice 


My 


i 


& 


should be Poser. Posertakes the chore 
out of modelling a character as the 
models are fully poseable straight out of 
the box. You can also change the 
physical appearance of the model and 
the textures of their clothes. You can 
even augment your characters with 
props to make them unique. 

Poser saves you hours of modelling 
time, which is vital if you need to meet 
deadlines. Here we'll use Poser to create 
acharacter for a magazine advert. 


Part 1: Creating the basic figure 


First we'll set up our project and select a basic Poser character to build on... 


Details 


The demo version of Poser 4is 
on the CD. This tutorial is written 
for the full version. The demo 
only offers the default mode, but 
you can attempt the tutorial 
using this. You can buy the full 
version from Curious Labs for 
£234. [w] www.curiouslabs.com 


Backup plan 


Each time you make a significant 
change to your Poserscene save 
it with a later number, such as 
Advert01, Advert02. You can then 
retrace your steps if things go 
wrong by opening a previously- 
saved file. 


Navigation 


You can move around your 3D 
scene using the well-labelled 
Navigation Tools on the left of the 
main document window. The 
hand icons let you zoom and 
track while the Rotation Trackball 
enables you to see your model. 
from any angle. Have a play with 
these tools to get familiar with 
panning, zooming and tracking 
around Poser’s 3D environment. 


Curious Labs 


Poser is published by Curious 
Labs whose site is an excellent 
springboard to all things Poser. 
You'll find a handy FAQ section 
at [w] www.curiouslabs.com/ 
products/poser4/htmL/ 
poser4faq.html. 


Make it real 


For more photorealistic Poser 
characters check out 
Daz3D.com. It sells Michael and 
Victoria - its own Poser figures 
who come with a photorealistic 
texture map forthe body anda 
separate map forthe face. You'll 
get more believable results from 
these models. 


& Double-click on the Poser 4.0 icon. The default 
figure will appear. Go to File and save the 
project into a new folder inside the PoserTM4 


folder. If you have a slow processor change the 


Document Display Style, which is at the bottom-left 


of the document window, to a lower setting. 


4 | Click on Figures in the Libraries palette. In the 
Figures sub-menu choose Characters>Female. 
We chose Masumi. Click on the Change Figure icon 
at the bottom of the palette (the single tick). Click 
OK in the subsequent dialog boxes and our digital 
actress replaces the default Poser figure. 


Now select the T-shirt from the Clothing- 
Female library. Click the ‘Create New Figure’ 
icon. This becomes Figure 3 in our scene. Select it 
and Conform it to Figure 1 as you did in the 
previous step. Now both the skirt and T-shirt are 
properly attached to our model. 


z 


@ Arrange the interface to suit the size of your 
monitor. You can move the floating palettes 


around by dragging on their labels. The main 
document window can be resized by dragging from 
the bottom-left corner. You can assign separate user 
interface (UI) dots to different layouts so that you 
can access them with one click. 


G To preserve her modesty let's kit her out. Go 
to the Figures Library sub-menu and select 
Clothing-Female. Scroll down and highlight the 
skirt. Click the ‘Create new Figure’ icon (the double 
tick). This adds the skirt to the scene. Our actress is 
Figure 1. The skirt is Figure 2. 


Add two boots (Figure 4 and Figure 5.) and 

conform them to Figure 1. As they're high 
heels we need to stand our actress on her toes. 
Select Figure 1>Body parts>Hip. Use the yTran 
Parameter Dial on the right of the interface to lift 
her up in the y axis. 


Let's lose the man in the T-shirt. To advertise 

our magazine we'll create a more attractive 
figure. Click on the right-hand side of the screen to 
open the Libraries palette. Here you can choose 
from a huge variety of characters and poses. We'll 
be using this palette a lot throughout the tutorial. 


We need to lock the skirt to the character so 

that it moves when she does. At the bottom- 
left of the document window select Figure 4 (the 
skirt) from the pull-down menu. Then, from the top 
menu bar, select Figure>Conform to. This makes the 
skirt conform to the body (Figure 1). 


Hemant Properties 
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9 | Parts of her feet are sticking through the boots. 
Select Figure 1>Body Parts>Left Foot. From 
the top menu bar go to Object>Properties. Uncheck 
the visible box to hide the unwanted geometry. You 
can also scale the boots slightly in the x and y axis to 
hide the feet. > 
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Poser has a whole library of different hairstyles 

to choose from. The one we've chosen (Long 
Curls) is found in the Figures>Clothing-Female 
Library. Select our model's original hair and click on 
the Backspace key to delete it. Choose the desired 
new style then click the ‘Create New Figure’ icon. 


Poser places the Long Curls hair (Figure 6) in 

the middle of her face like a hideous 
moustache. Move the mouse over it to select Select 
Hair1 — the main section of the hair. Now use the 
yTran and zTran Parameter Dials to move the hair 
into a more appropriate position. 


Part 2: Customise the clothes 


That's our figure built and dressed. Now to change her clothes to something more hip... 


Copy the files denim.tif and logo.tif from the 
cover CD into the Textures folder in the Poser 
Runtime folder. To apply a more realistic texture to 
the skirt go to Render>Materials. This opens the 
Surface Material window. In Object select Figure 2. 
In Material select Cloth. Make the Object Colour 
white so any imported texture shows through. 


Part 3: Importing props 


a 


In the Texture Map section click Load and 
import the denim.tif. Make the Highlight 
Colour a light blue. Click OK. Next select the Figure 

3 Object (the T-shirt) and its shirt Material. Add 
logo.tif to its Texture Map. Press OK. Now select 
Render>Render to see how the textures look on 

our model's clothes. 


Part 1: Creating the basic figure continued... 


12 Select Hair1. From the top menu bar go to 
12 | Figure>Set Figure Parent. Choose Figure 1's 
head. Now the hair will move with the head. The 
hair has up to four editable strands (A, B, C and D), 
which the budding Vidal Sassoons among you can 
edit and move to fine-tune the style. 


| Strenatn 
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In the Surface Material window choose the 

Figure 6 Object (the hair). Make the default 
colour brunette (or blonde if you prefer). Make the 
preview colour a dark brown, too. 


The secret to making your Poser figure unique is to augment it with props built in other 3D applications... 


Go pro 


The Poser Propack enables you 
to up the ante. This software 


enables you to export the figure 


Charrvet 14 ¥, 2% 


and IK hierarchy to other 
packages such as LightWave and 
Pixels 3D so you can add Poser 
people to other 3D projects. 


G Let's give our Future girl a product to market. 
Copy the magazine.3DMF file from the cover 
CD into the Props folder (PoserTM4\Runtime\ 
Geometries\Props). Go to File>Import> 
Quickdraw3DMF. Set the Prop Import dialog box 
to around 30 per cent of standard figure size. 
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Click on the magazine to select it. Use the 

yTran and xTran Parameter Dials to position 
the magazine by the girl's right arm. Rotate it 180 
degrees with the yRotate Parameter Dial so that the 
cover CD is displayed. Scale it to 60 per cent. 


Go to Render>Materials. The magazine has 

two materials — one for the magazine and 
another for the cover CD. For material (the 
magazine) import magazine.tif into its texture map. 
For material2 (the CD) import CD.tif. Make sure you 
change the Object Colour of both materials to white 
in order for their texture to show through. 


Part 4: Ready to pose 


Now we get Poser to live up to its name. We'll pose our Future girl ready for rendering... 


The Poser 3 
Handbook 


Shamms Mortier 
Charles River Media 
£34.99 

ISBN: 1886801908 


We've not reviewed a Poser 4- 
dedicated book as yet, but this 
excellent user guide for v3 will 
help you gain expert knowledge 
of this superb program. 
Beginning with the ubiquitous 
new features and interface 
chapters, the manual quickly 
moves to animating elements 
such as face, eye and mouth. You 
also get excellent tips on 
animating Zygote animals. 

Poser doesn't exist alone. 
Mortier illustrates in detail how 
images can be imported 
maintaining their own Parameter 
Dials, plus plenty of hints and 
tips to really show you the power 
that Poser offers to animators. 
Overall, this is an excellent 
manual for novice users. Concise 
tutorials are supported with 
excellent supplementary 
material on the accompanying 
CD making this the perfect 
choice for anyone using Poserfor 
the first time. 


8 Make the magazine a child of the right hand. 
From the main menu go to Object>Change 
Parent>Right Hand. Now the magazine will move 
with the hand, which makes it easier to fine-tune 
its position later. 


4 | Select the left foot from Figure 1. Use the 
zTran Parameter Dial to move the foot 
forward 0.134 units. Now she's stepping forward as 
if to present the magazine. Notice that the material 
of the skirt moves forward to accommodate the 
leg's change of position. 


From Figure in the top menu bar select Use 

Limits. This stops us creating an unrealistic 
pose. Click on the right forearm, shoulder and right 
hand and in turn use the Bend, Twist and Side-Side 
Parameter Dials to pose our model holding out the 
magazine. You'll need to rotate the magazine to 
show the cover. 


Gg Select the model's neck and use the Side-Side 


Parameter Dial to bend it 18 or so degrees. Her 


head now echoes the position of the magazine, 
giving symmetry to the image — and it makes her 
look cute. If you like the girl, you'll like the product. 


a3 To make the model step forward choose 

Figure 1>Body Parts>Hip and use the yTran 
Parameter Dial to move the hip 0.044 units. Because 
inverse kinematics are activated on both feet they 
stay locked to the ground while the rest of the 
character moves forward. 


G Choose the face camera from the Camera 
Control palette. Select her head. Increase the 
size of her lips a tad, make her smile and raise her 
left eyebrow a little. The finishing touch is to use the 
xRot Parameter Dial to make strand C of her hair fall 
on to her face. 


Part 5: Lighting and rendering 


Lastly, we need to light our actress and render the final image... 


rt | Select the Main Camera from the Camera 
Controls palette and position the girl in the 
centre of the scene. On the Light Controls palette 
edit the Light Properties for each light. Make one 
light a strong Key light that casts shadows. Reduce 
the intensity of the Back and Fill lights and turn off 
their shadows. 


Go to the top menu bar and choose Render> 

Render Options. Rendering to a new window 
allows for a larger image. Turn on anti-alias, 
bumpmap and shadows for the best results. Finally, 
click on Render Now. 


3] Once you've built your figure it's fairly 
straightforward to change her pose and render 
out a variety of images for different posters or 
adverts. You can choose to import a background 
image into Poser but, for better results, composite 
the rendering in Photoshop (it's rendered with its 
own Alpha channel.) EEE 
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Getting startec 


with D Sculptor 
and Bryce 


Using D Sculptor and Bryce, we show you how to make 
a 3D model of virtually anything without 3D modelling... 


reating 3D objects is a tough 
job. If you’re new to the 
process, you can look forward 
H to a lot of hard work, anda 
long time spent learning the ropes. 
Modelling complex, organic curved objects 
is hard — even for experienced designers, 
and building a realistic model of a real- 
world object is the hardest job of all. 

Luckily, there are shortcuts. D Sculptor is 
one of them. With it you can take a real 
object and turn it into a 3D modelina 
couple of hours, by simply placing it ona 
pattern of markers and photographing it 
from a range of angles. 

We're going to go through the entire 
process of producing a model using the 
free and full working copy of D Sculptorv1 
we've provided on the cover CD. We're then 


going to place the model we've built ina 

3D landscape produced in Bryce 5(a 
demo of which you’LL also find on the 
coverdisc). All the files you'll need to follow 
this tutorial are on the CD in the Tutorial\ 
DSculptor folder. 

D Sculptor has its limitations — it can't 
capture concave models like bowls, 
because it works by examining the 
silhouette of an object from various angles. 
It also can't accurately capture textures for 
very shiny or transparent objects. That said, 
most models can be reproduced relatively 
well by anyone without experience in 3D 
design. Once you’re familiar with the basic 
tools, you'll be able to move objects 
between the real world and the 3D world 
easily, and that opens the way to producing 
all kinds of effects, images and animations. > 
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Part 1: Starting out 


In order to work out the 3D shape of an object, D Sculptor needs three things... 


Details 


The full version of D Sculptor Tis 
onthe cover CD. Youcan 
upgrade to D Sculptor 2 with our 
special offer on page 85. 


The Manual 


Please don't call us or D Vision 
Works for instructions on using 
the application. There’s a full 
manual that installs to the 
Start>Programs tab with the 
rest of the D Sculptorsoftware. 
Just launch it from there and use 
it for reference. 


Large objects 


If you decide to capture a large 
object like a car, the marker 
pattern is only going to be part of 
your problem. You'll need to be 
able to get far enough away to get 
the whole object in shot, and 
some way above the object at 
every angle. You'll also need to 
work fast as natural light is 
constantly changing, 


Textures 


D Sculptorcreates textures by 
examining each image, and 
mapping those polygons which 
are flat on to the camera with 
pieces of texture grabbed from 
that shot. This means that your 
complete texture will be made 
up of thousands of pieces of 
different images all stitched 
together. Any difference between 
lighting, colour balance or 
reflections between one shot and 
another will show up as patchy or 
broken textures. 
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Firstly, D Sculptor needs to know the outline 

of your object. Secondly, it needs to know its 
colouring. And, thirdly, to make all this data make 
sense, it needs to know where the camera was 
placed in 3D space when each image was taken. In 
order to work this out, it needs a reference — a series 
of markers whose position it knows. 


a Take some time setting up your studio before 
beginning photography. Create an area in 
which your model can be photographed against a 
plain background. We've just used white paper as a 
backdrop. This will make masking the object and 
locating the marker points much easier and save a 
lot of time later on. 


Start photographing. We need a good range of 

images of the object from all angles. We also 
need good quality photos. A digital camera with a 
decent resolution is obviously the best bet, but you 
can use a standard camera (and then scan the 
results), or even film with a video camera at a push. 
However, DV footage doesn't have a high enough 
resolution to create really good textures. 


You'll find such a reference in the Program 
Files/D vision works/d sculptor/patterns folder 
which was created when you installed the package. 
Here the standard layout is provided in a number of 
formats, as TIFF and GIF image files, as a Word file 
and as a PDF. Pick whichever format you can open 
(we chose the GIF which opens in Internet Explorer) 
and print out the pattern. 


5 | The process of photography may take a while, 
and during that time, natural light may 
change. This will ruin the textures of our object. 

D Sculptor will be stitching together parts of 
different images to create the texture — if they're 
differently lit, the effect will be patchy. A couple of 
cheap garden lights will do the trick. 


Use the marker points as a guide — a photo 
8 | looking from the direction of each point 
usually gives a good all round look at the model. 
Make sure you get in as close as you can, but be 
sure to get all the marker points as well as the whole 
model in every shot. 


g Place the object centrally within the square. 
For our purposes an A4-sized pattern is fine, 
but if you want to scan a larger object you'll need a 
bigger set of markers. As long as you keep the 
numbering the same and the points equally spaced 
around the square, you can make a marker pattern 
of any scale. 


Make sure you light the object evenly, but 
G avoid highlights, shadows and reflections as 
these will not come out well in the final model. We 
want to provide light and shade later in our 3D 
world and not restrict ourselves to the shadows and 
reflections created in the studio. For that reason, 
avoid shiny objects like the one above. 


g Don't take images from a very high angle 
(looking directly down on the object) or a very 
low one (from ground level) as these angles tend 
to confuse the software. From a low angle the 
marker points will be unrecognisable, and from a 
high angle there won't be any perspective in them. 
Keep the camera at between 30 and 60 degrees to 
the horizontal. 


Part 2: Choosing which camera to use 


Whichever method you use, try to name your images sequentially. 
This makes them easier to locate and work with in D Sculptor... 


BMP files 


BMP files aren't compressed so 
they tend to be large. JPEGs 
will be smaller, but the quality 
is reduced. Most image 
software will ask you how much 
you want to compress your 
IPEGS and, as long as you leave 
the setting reasonably high, 
nobody will ever notice on your 
finished project. 


Memory cards 


Some camcorders have a still 
image mode and store images on 
amemory card just like a digital 
camera. If yours does, use that 
function in preference to 
standard recording mode. The 
quality will be better, and the 
camera will be optimised for still 
image capture. 


a If you're using a digital camera, use a 
reasonable resolution setting when taking 
images. 1024x768 will give good quality textures, 
and you should be able to fit enough images on the 
camera to cover your object properly. Low quality 
settings will produce poor textures and make 
masking and marker settings inaccurate. Very high 
resolution shots will slow D Sculptor significantly. 


4 | If you opt to use a traditional camera, get your 
photos developed. You'll need good sized 
prints (not contact sheets) so that the scanner can 
get a good image. Place them in your scanner. 

You should be able to get three or four images on 
each scan. 


If you're using your camcorder and it doesn't 
have a stills function you'll need some extra 
peripherals, such as a capture card in your PC anda 
capture program to import the footage. If it does 
have a stills function, follow the instructions above 
for a digital camera. Some capture utilities will let 
you Click to save still images directly to disk. 


2 Transfer the images. Most digital cameras 
uF import pictures through a USB port. The 
camera should be recognised as soon as you plug it 
in. The capture software supplied varies from 
camera to camera. Olympus Camedia (above) is 
pretty typical. You should be able to upload all 
pictures, or choose just those you need. 


5 | We're using Photoshop, but many scanners 


come with their own software. Mostly, they 
have the ability to do previews of your scanned 
material. Settings are important. Don't scan at more 
than 200 dots per inch, as you're likely to end up 
with massive images which are slow to process, and 
will create unmanageably high resolution textures. 


If you have to capture the video, you'll have to 
8 | import it into an editing package to export 
your shots. Here we're using Adobe Premiere. We 
place our shot onto the Timeline, then drag the 
playback head through it to find each shot. We can 
then save it to disk with the File>Export 
Timeline>Frame function. 


Most capture software offers limited image 

manipulation. Use this to correct colour 
balance and lighting to make all your images 
uniform. You can even remove minor reflections if 
you're careful, but don't do too much, as good 
texture mapping depends on images having the 
same look. 


G With the pictures scanned, cut out each one 
and save it as a separate file. Name the files 
sequentially and save them as JPEGs, TIFFS or BMP 
files. Use this opportunity to correct any 
imperfections or brightness changes between 
photos if you can, but don’t be too heavy-handed 
or you might make your shots too different. 


9 | Whichever way you do it, you'll probably need 
to tweak your images a little to improve the 
contrast and colour. If you can, it's a good idea to 
remove the interlacing (we've used Photoshop's 
Deinterlace filter). This stops the horizontal banding 
you sometimes get on video stills. > 
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Part 3: Bring in D Sculptor 


With the photos in place, we can start work in D Sculptor. You'll find all the photos on 
the CD, so you can work with our project or create your own from photos you've taken... 


The Pointer tool 


If you place a point wrongly, you 
can always switch to the Pointer 
tool (the arrow at the bottom 

middle of the screen) and either 
select and delete the marker, or 


just drag it into position. 


Removals 


To remove the area between the 
tail and the leg, right-click and 
select background, then simply 
click around the space to make 
another mask. Finally, right-click 
again to switch back to Object 


mode for foreground masking. 


2 | We now need to locate the marker points on 


each picture. Turn on the Marker Insertion tool 3 Not all of the markers are visible. For instance, 
a After loading up D Sculptor, our first job is to (in the middle of the screen at the bottom and click in this shot, marker 10 is obscured. When we 
import our images. Choose File>Insert Photos. on the exact centre of each marker in the shot in click on the next visible one which should be marker 
You can select all your photos at once and import turn. A numbered marker should appear (the 11, it gets automatically labelled as 10. No problem, 
them together, but there's nothing to stop you from —_ corners are numbered so you know which marker just click on the centre of the cross, and select 11 
adding extra images or removing them at any time. should go where. from the drop-down list. 


Once you've placed all the markers in the shot, 
you can move on to the next image. The 
forward and backward arrows at the top-left of the 


6 | Only place four or five points to start the mask 
off — you can be a bit rough. Now go to the 


image let you navigate the pictures you've loaded Masking the shots is a process of indicating the _ slider just underneath the Masking tool. Drag it up 
in. If you need to zoom in on a picture to get a 5 | outline of the object in every image. Click the and down, and the lines you've created move to 
better look, use the mouse wheel or the magnifying Masking tool (the icon depicting three linked dots at _stick to the model's outline. Adjust the slider until 
glass at the bottom in the centre. When you've the top-left of the image) and start to click yourway —_ you get a good fit, then go back and add a few 
marked all the images, save your work. around the object in shot. more points. 


When you've finished, double-click to finalise 
the mask. Now move on to the next image and 8 | D Sculptor uses the marker pattern to locate 
do the same. Your masks should be as accurate as 


the camera in 3D space, and the outline to g You can drag to swing the model around in 3D 
possible, but if there are errors, make sure the mask Carve the object's profile from that angle. With a to examine it. As you can see the shape is 
is too large rather than too small. Remember, couple of images masked we can see what this crude, but it's beginning to resemble the model from 
D Sculptor works by carving your model from a means. Switch to Model mode (the blue M at the some angles. Our two images have defined the 
solid block. If you cut off a piece, you can't put it bottom left of the screen), and click Generate Mesh _ outline from two angles and, as we add more 
back however well you carve the other angles. (second icon up on the right). A model is created. masked images, we'll get more and more detail. 
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Switch back to Photo mode (with the P button 
at the bottom left) and continue creating 
masks for the remaining images. It's a long process, 

so save your work often. 


As you create your masks, you can use the 


incorrectly, just hit delete and it will be removed. 
You can then place it again. 


: : 
zoom icon or the mouse wheel to quickly close 
in on difficult areas of the mask. If you place a point 


It's a bit of an effort to keep going back to the 
left of the screen each time you want to adjust 
the slider, but if you Ctrl-click anywhere on the 
screen, a slider will appear next to the mouse. This is 
more convenient, and means you can keep 
concentrating on the edge of your model. 


Part 4: D Sculptor with Photoshop 


Use D Sculptor v07 with Photoshop's set of masking tools... 


Masks 


If you don't have or don't like 
Photoshop, there's nothing to 
stop you using any package to 
create your masks. The only 
requirement is that you can 
produce a black and white image 
file, where the black sections are 
the background, and the white 
parts are the object itself. 


a Open your image in Photoshop. There are 
many masking tools available in Photoshop. 
We're only going to use a couple. First, click on the 
Magnetic Lasso tool (the second tool down on the 
left-hand side of the toolbox — the icon should have 
a magnet on it. If it doesn't, click the tiny arrow next 
to the Lasso tool, and the magnetic version should 
appear). With it, you can trace around the model, 
and the mask will attempt to stick to the object's 
edges. When you finish your mask, double-click to 
confirm it. 


The result is rather good, but needs refining. 

Switch to Quick Mask mode by hitting Q on 
the keyboard. This lets you paint your mask shape 
with all the standard Paint tools. Everything 
highlighted in red has been masked out. Choose a 
small paint brush, and paint. You'll notice that 
you're painting in extra masking. Switch to the 
eraser, and you can rub out areas of mask. 


When you hit Q again to go back to Normal 

mode, your mask has changed. Now go to 
Select>Save Selection and opt to save the mask as a 
new document. Your mask now appears in a 
separate window as a black and white image. Use 
Image>Mode>Greyscale to change the mask into a 
form you can save, and record it as a JPEG, TIFF or 
BMP file. Now when you load up D Sculptor, you 
can import the mask as well as the image file. 


Part 5: Constructing the model 


We can now move to the final job — constructing the model and its textures. This is easy in D Sculptor... 


More detail 


Most models can be produced 
pretty well with between 2000 
and 3000 triangles. If you want 
more detail, you'll find it’s far 
better to take and mask more 
images than to just increase the 
triangle count. 


Keep count 


If you change the Triangle slider 
after you've calculated the 
textures, you'll lose your texture 
information and you'll have to 
calculate it again. 


Ge Switch back to Model mode. Click the 
Generate Mesh button again and, after a good 
deal of processing, our model appears. It's looking 
pretty good now. If you don't get the shape you're 
looking for, you may need to go back and add more 
images. If you've left your model in place on the 
reference pattern, then you can easily take more 
shots. If you haven't you won't be able to place it in 
the same position again, so you'll have to live with 
what you've got. 


Simplify the mesh. Right now, your model will 

have been created with a huge number of 
vertices. This doesn't matter except that it will 
needlessly reduce the performance of your system 
when you introduce it into a 3D scene. Drag the 
slider to the right of the screen to simplify the mesh 
so it contains around 3000 triangles (see the margin 
note called More detail). 


\ 
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Finally, hit the Extract Texture Map button 

(under the Generate Mesh button) and after a 
delay, which could be up to a few minutes, the 
model will be textured. It should now look almost 
completely real — just like the original object.» 
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Part 6: Creating a scene in Bryce 


It's now time to take our object and render a scene in Bryce. You'll find the project files 
on the CD along with a demo of Bryce, but you can make your own from scratch... 


Details 


The demo version of Bryce 5is 
onthe cover CD. You can buy the 
full version from [w] 


www.corel.com for £229. 


Under the sea 


Although you can't see the model 
as a solid object, you can tell 
when the land mass goes below 
sea level. The underwater part of 


the wireframe will vanish. 


Quick renders 


The smaller spheres to the side 
of the Render button offer 
different rendering tools for 
quick renders. This can be useful 
when trying to get your 
composition right — you don't 
always want to wait fora top 


quality render. 
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Save out your model from D Sculptor. Saving 
a using the OB) format exports a model which 
can be read by Bryce, and the texture will also be 
saved and will import with it. We can now close 
D Sculptor and open up Bryce. Use the tiny triangle 
about a third of the way down the left-hand side of 
the view screen to switch the viewing angle to 
Camera View. This will have no effect for now, but it 
will make things easier later on. 


It's easier to control things if we switch to Edit 
4 | mode (with the button at the top of the 
screen) and drag on the Reposition icon (the cross 
icon fourth from the left on the top row) to move 
the island in the X, Y and Z directions. There are also 
tools to alter the scale and rotation of the object 
Play around until you get a composition you like. 


To get back to Wireframe view, click the cube 
icon near the bottom right of the screen. If you 
want to change the viewing angle, drag on the large 
trackball to the left or use the crosses above it. Each 
allows you to move your viewpoint in various ways. 


a Our image will include the leopard model 
sitting on a crate after a shipwreck surrounded 
by a group of its less fortunate companions. Our 
first job is to create some sea. Just click the sea icon 
at the top of the viewing window to the left, and 
the sea appears as a flat plane. 


Materials 
Verdant Hills 


Now click the material icon above the top-left 

of the view screen. This takes us into the 
material editor. There are lots of controls here, but 
we're not going to use any of them. All we want to 
do is select a preset material. Click the right-pointing 
triangle at the top of the picture icon, and you're 
presented with a massive range of materials. We've 
chosen Verdant hills from Planes and Terrains for our 
land mass, but you can pick anything you like. 


Wood Crate 


8 | Next we have to place our packing crate. Click 
the arrow next to the Create tab and select the 
furniture option in the menu that appears. This gives 
access to a range of objects. Find the packing case 
model and click the tick at the bottom of the 
window. With the demo version, the packing crate 
is not available. You can get a similar untextured 
effect by creating a cube and resizing one axis. 


Next, we need a land mass. Just click the 

Terrain icon and one is created. We could do all 
kinds of things to the island to customise it, but for 
now we're concerned only with its position, and its 
material. To position it, we can simply select and 
drag it around. 


G Let's render the scene just to see what it looks 
like so far. The render button is the silver 
sphere just below the large trackball half way down 
the left-hand side of the screen. Click it, and the 
scene will render. 


9 | You can now position the case just as you did 
with the island by switching to Edit mode and 
using the move and rotate icons. Place the crate 
centrally with its base just below the surface of the 
water. You should be able to get an idea of how the 
finished picture will look from the preview icon at 
the top-left of the screen. 


Switch views 


Get used to switching between 
views. Knowing what angle to 
look at your scene from to doa 
particular job is an important 
skill when working in 3D. 


Extra access 


Whenever you have an object 
selected, a little toolbox appears 
beside it. This gives you access 
to the texture, material, and 
editing of the object as well as 
allowing you to move it down to 


the nearest surface. 


We're ready to bring in the toy model. Go to 

the top of the screen and the menu bar will 
appear. Select File>Import Object, and select the 
model — the OBJ file. You can use your own 
creation, or import ours from the CD. 


3 We now need to place the model on top of the 
crate. This can be a delicate job, and you may 
need to switch views to get it right. Scale and rotate 
the toy so it fits on top of the box, then place it as 
close as you can to the top. With the model 
selected, you can click the down arrow which 
appears to the right of the model on the viewport 
(it's the last in a column of icons). This moves the 
model down to the nearest surface — in this case the 
top of the box. 


16 | Click OK and the duplicates are created. You 
can now select each one in turn, and place it in 
your scene with the now familiar edit position and 
rotation tools. Here, we've placed our duplicates in 
the water around the crate. We've rotated them to 
various angles as though they're floating discarded 
in the water. 


After a few moments, the model should 
appear in the viewer. You won't see a 
complete wireframe — just a few shapes describing 
the outline of the object, but it should be 
recognisable. If nothing appears then your model is 
probably off-screen somewhere. 


14 | Render the result. It's looking pretty good. If 
you need to make any adjustments to the 
position of the objects, the composition of the shot 
or the placing of the camera, do so now, and then 
save your work. 


A Midsummer Afternoot 


Finally, we need to change the weather and 
lighting conditions. Select the triangle next to 
the final tab at the top of the screen — the Sky and 
Fog tab. The Sky and Fog tab lets you set up 
environments with fine detail, but we're just going 
to use a built-in preset. Choose an appropriate 
looking sky (we picked A Midsummer Afternoon). 
Click OK. The settings are loaded into our scene. 


12 If this happens, you'll need to locate it and 

drag it into view. To do this, click the view 
picker triangle at the left of the viewport (the one 
you used to select Camera View). Switch to From 
Top and you'll get a bird's eye view of your scene. 
You should see the model and be able to drag it 
somewhere in front of the camera (two diagonal 
lines mark the edges of the camera's vision). 


Switching back to Wireframe mode, and 
15 | selecting the leopard model, we now duplicate 
it. Select Edit>Multi-replicate and the replication 
dialog will appear. This lets you choose the number 
of duplicates and their position, rotation and scale 
relative to the original. Set the number to 5 and the 
other options as above. 


All that's left to do is to render the finished 

scene. The demo version on the CD won't 
produce full quality renders. If you have the full 
version, you can set resolution and quality settings 
for your shot. Beware, however, Bryce scenes at 
high quality can take a long time. Our finished shot 
took more than two hours to render! FEES 
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In issue — 


» Flash MX 
brings amazing new ways af attracting visitors 
to your Website 

Create stunning 
vector illustrations using Adobe's leading 
image-editing tool 


Carrara 2, Apple Cinema Tools, 
Photoshop Elements 2 and more 


Step4.dsd - D Sculptor 
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Egyptian 11.Jp9 
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Egyptian 15.ipg 
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ow you've had time to try out D Sculptor 1, 
using it to turn your objects into 3D 
models, you'll want to know what version 2 
offers. This upgrade has taken the product, 
and its original approach to 3D modelling by 
photography, even further. 

D Sculptor 2comes in Standard and Pro editions 
Standard boasts significantly improved image detail 
and workflow. New features include an improved user 
interface, instant detection of markers, automatic 
masking and export to more formats. 

The D Sculptor 2 Pro edition has extended features 
for professionals, such as the ability to merge shots 


[to D Sculptor 7 


from different positions to ensure the best textures 
and shapes. Recently,Computer Arts reviewed 


D Sculptor 2 Pro and gave the innovative product four 


out of five. Now it’s your turn to use this professional 
but affordable product for your own digital design, 
illustrations, Web work and animations. 

To try before you buy, you can download a demo of 
D Sculptor 2from [w] www.d-vw.com 


The offer 

Thanks to D Vision Works, CAS readers can upgrade 
from the full version of D Sculptor 1— as featured on 
the coverdisc — fora reduced price 


The Standard version is worth £500, but our offer 
enables you to upgrade to this edition for only £400 
(including tax and delivery). 

The Pro edition normally costs £900 — but it’s 
available to readers at only £700 (including tax and 
delivery). Make the most of this fantastic upgrade 
deal and save up to £200. ca-s 


To order D Sculptor 2 at £400 forthe Standard version or £700 forthe Proversion call D Vision Works on 


7 +44 (0)1235 437 109 
or [f] +44 (O)1 Pee 1 wouste core PUCA71) 
or visit [w] http:7/www.d-vw.com/ dsculptor/upgrades/ca/1.hAtm 


Payment by Mastercard, Visa or Switch preferred. 


Print and multimedia design 


Turning your art ito media that communicates with people by following 


these practical projects for desktop publishing and multimedia design... 


his last section is a bU of a catch-all. It’s a 
step on from the image creation sections in 
that we'll be using design skills to create 


jf media, with @ pu pose beyond pure visual 
art. Print design and multimedia desigi usually have 
the functional objective of conmunicating specific 


ideas to people, on top of thet aesthetic values. 

First, we'll take a look ai desktop publishing. For 
years, QuarkXPress has beer the application of choice 
in the print publishing indust y. /iowever. it is 


gg Getting started with InDesign 2 


FA. cetting started with Director 3.5 
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expensive, and in our eyes it has been overtaken in 
terms of quality by Adobe's InDesign. In fact, InDesign 
scored an impressive 4.5 stars out of five when 
reviewed back in issue 67 of Computer Arts. Here, 
we'll take you through the fundamentals of laying out 
pages, handling flowing copy, typographic techniques 
and the use of images in InDesign 2. 

Static print design is one thing, but you might find it 
far more interesting to create something interactive. 
For that reason, we've also produced a tutorial on using 


Director 8.5 - the leading professional multimedia 
authoring application — to put together a basic 
multimedia CD-ROM. The project you'll tackle is to 
design an interactive curriculum vitae, which is a 
fitting end to this edition of Computer Arts Special. It 
could be that once you've followed all our tutorials 
you'll have the confidence you need to break into a 
new area of digital creativity, or just break onto the 
scene full stop. So it might just be time to start sending 
out that CV... FEES 


Illustration: Derek Lea [w] www.dereklea.com 
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Getting started 
with InDesign 2 


Get up and running quickly with the world's most advanced 
desktop publishing package by following this accelerated 
introduction to InDesign's core features. .. 


esktop publishing, or DTP as 
it is usually referred to, is 
the art of print design for 

i readers. That is, the core 
purpose behind DTP is the presentation 
of text that’s going to be read by 
someone — in print or on screen. 

However, over the years, the 
distinctions between DTP illustration 
and imaging have blurred. Better still, 
the ‘P’ really does at last mean 


‘publishing’ now that you can export your 
page layouts directly to electronic book 
formats and to the Internet, not just send 
them off to the printing presses. 

For visual on-screen page layout, 
most word processors like to think they 
can nibble at the heels of DTP But 
professional software such as Adobe 
InDesign 2is superior in both graphic 
design and typography, and far purer for 
modern PostScript-critical print 


workflows. It also borrows a great deal 
from other design families such as photo 
editing and especially vector illustration. 
To master all these areas is to become a 
desktop publisher. 

This tutorial merely scratches the 
surface of what you can do with Adobe 
InDesign, but it gives you a chance to try 
it out immediately without having to pore 
overa heavy tome. Just don't forget to 
keep saving the document as you work! 


Part 1: Text in columns 


Lay out your snap-to-page guides, draw linked column frames and flow text into them... 


Details 


You can buy the full version of 
Adobe /nDesign from Adobe for 
£668. [w] www.adobe.co.uk. You 
can download the demo from [w] 
www.adobe.com/support/ 
downloads. We couldn't fit the 
demo of InDesign on the CD with 
this issue. However, if you would 
like a demo with which to follow 
the tutorial, Adobe has demo 
CDs to send to the first 5000 
Computer Arts Special readers 
who contact the company. Visit 
[w] www.adobe.co.uk/tryouted 
and fill in the Web form if you 
would like one. 


Adobe palettes 


InDesign’s floating palettes 
follow the same interface 
conventions employed in Adobe's 
other software packages, 
including Photoshop and 
Illustrator. Where several 
palettes are tabbed together, 
drag on the tab headings to tear 
them away so they float 
independently. We recommend 
you start this project with all 
palettes closed, then only open 
the ones you need (from the 
Window menu) as you progress. 


Master Pages 


Although we haver't used them in 
this project, Master Pages are a 
key DTP concept. The idea is to 
automate the creation of page 
objects that appear in regular 
places throughout a document, 
such as folio lines, rules and 
other design furniture. InDesign 
enables you to set up and use 
multiple Master Pages in any 
document, managed from the 
Pages palette. If your document 
suddenly appears blank as you 
work on this project, you 
probably switched to A~Master in 
the Pages palette by mistake. 
Just double-click on the 2-3" 
page icons to get back. 


New Document 


Number of Pages: [2 | Facing Pages 
©) Master Text Frame 


- Page Size: {Ad 


| 
width: 210mm | Orientation: | 


| Height: [24297 mm 


Margins - —- — 
| Top: iz7mm | inside: Fj25mm _| 
| Bottom: Ff127mm | Outside: 40mm | 


po Columns =~ — oa TOOT 
Gutter, 


25 mm 


@ Launch /nDesign 2 and type Command+N in 
Mac OS or Ctrl+N in Windows to call up the 
New Document dialog. Enter the values shown 
here. You want two pages in a facing-pages 
document, A4 portrait, 25mm inner margin, 40mm 
outer margin, two columns and a 25mm gutter. 


Click on the text box’s ‘out port’ which 

appears near its bottom-right corner. Click 
inside the next column guide to establish a second 
column. Repeat to create two more linked columns. 
Select ‘Show Text Threads’ under the View menu to 
see the links. 


ey 


Hold down the Command key in Mac OS or 

Ctrl key in Windows, click on the first column 
and tap the Backspace key to delete it. Drag down a 
guide from the horizontal ruler to roughly 105mm, 
then Command/Ctrl-drag on each column's top- 
centre handles down to snap to it. 


~ W Siac Section 
‘© Automatic Page 
@ start Page Numbering at: [2 
rage Numbering Options 
Section Prefix: [|] 
Seve: (2.3, 
Seation Marker: | 


Click OK and the document is created. Expand 

the size of the Pages palette to see how the 
two pages are laid out. Open the Numbering & 
Section Options dialog from the Layout menu and 
enter 2 next to Start Page Numbering at. Click OK. 
Save the document under the File menu. 


Wuntiied-6 @ 
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Your two-page document now starts as a 

spread, not a right-hand page followed by a 
left. Using the Type tool in the main Tool palette, 
click and drag to create a column text box to fill the 
first column guide. Switch to the Selection tool to 
see the box outlines. 


ps0, 
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Switch back to the Type tool. Type a few 
characters in the first column, double-click to 
select them, and open the Character palette from 
the Type menu. Change the font size to 10pt. Drag 
away the Paragraph palette and change the ‘First 
Line Left Indent’ to 4mm as shown. 


ore consectet jureet iniam, sum vel 
dit iure commodo core velessi. 
Lore vulput ate duisi. Lorperit 
lor se consequate commoloborer inis nis- 
idunt la feum zzrillu tatisim velit praese- 
uis adigna at num velenit nibh et, con 
enim in velit prat. Ut ipit velismolorer si 
Loreet, volore voloreetue modolobore 
a feugait numsandre doloreet ut accum 
elismod tie exeratu raesto commole seq: 
isit wisi et wis at la faccum vei ex ex erd 
odolent vendre facipis dolorpe ationsecte' 
at. 
Duis nisisis alis alisl doluptate min- 
iduis aliquismod tat for iriustrud dolor 
senim nibh eum zzril do conse min ver- 
fesectet veniam ad molore con essenim 


8 | Next use the Zoom tool to move in closer to 
the top of the first column. Switch back to the 
Type tool and click in the first paragraph. In the 
Paragraph palette, change ‘First Line Left Indent' to 
Omm and then enter 3 in the ‘Drop Cap Number of 
Lines’ field. 


Find /Change... 
Check Spelling... 


Text Frame Options... 


insert Special Character 
Insert White Space 
Insert Break Character. 


Change Case 
‘Show Hidden Characters 


With the first text column still active, Ctrl-click 

in Mac OS or right-click in Windows to call up 
a Context menu. Choose the command ‘Fill With 
Placeholder Text’. This pours nonsense filler text 
into the first column and all others linked to it. 
Delete the unwanted characters at the beginning. 


@ show Guides 
lock cuides 


Wshow Layer 
Dtock Layer 


9 | Press Command+0 in Mac OS or Ctrl+0 in 
Windows to fit the entire spread on screen. 
Open the Layers palette from the Window menu. 
There's only one layer, named Layer 1. Double-click 
on it to open the Layer Options dialog, rename it to 
Text layer and click OK. > 
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Part 2: Add pictures and colour 


Learn how /nDesign enables you to draw, place images, work with colour, and apply transparency... 


Vector art 


InDesign’'s drawing tools are no 
replacement fora vector art 
package like FreeHand or 
Illustrator, but they are strong 
enough to save you having to 
open a new program to create 
reasonably simple graphics. The 
Pen, Pencil, Smooth and Erase 
tools in particular look and work 
exactly like their equivalents in 
Adobe Illustrator. Once you have 
created an object using these 
tools, you can then move it 
around and resize it using the 
Selection tool (black arrow), or 
edit its path and Bezier direction 
points using the Direct Selection 


tool (white arrow). 


Text wrap 


While QuarkXPress uses the 
front-to-back stacking order of 
items on a page to determine 
how text wraps around other 
objects such as cut-out pictures, 
InDesign treats text wrap as an 
independent attribute. You use 
the Text Wrap palette to assign 
the attribute to selected objects, 
and optionally disable the effect 
for selected text boxes by ticking 
Ignore Text Wrap in the Text 
Frame Options dialog (Object 
menu). The stacking and layer 


order is irrelevant 


Colour options 


In common with other Adobe 
design software, InDesign 
provides a Colour palette and a 
separate Swatches palette, but 
you can use either to create new 
colours and apply them. This can 
be confusing to the beginner. So 
think of the Colours palette as 
similar to the Character and 
Paragraph palettes for editing 
text attributes on the fly, while 
the Swatches palette is akin to 
the Character Styles and 
Paragraph Styles, where you 
create and save these attributes 


for reuse and global adjustment 
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File Edit Layout Type Object Table View Window Help a 
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File fd Layout Type Object Table View Window Help #8 
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Click on the ‘Create New Layer’ button at the 
bottom of the Layers palette and change its 
name to Pictures layer. With this new layer selected 
in the palette, switch to the Pen tool and click once 
above the top-right of the spread and again at the 
top-left of the spread. 


File Edit Layout Type Object _Tabl 


10 dolobortisi. 
-or siscinei tin ver ipsummodit iri 
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Press Shift+C to activate the Convert Direction 

Point tool. Click on the upper point of the 
newly wedge-shaped corner, hold down the Shift 
key and drag to the right. Stop when you have 
created a perfectly rounded arc as shown. 


Use the Selection tool to move this image to 
the bottom-left corner of the spread. Hold 
down Command/Ctri+Shift as you drag on a corner 
point to resize it down proportionally. Then use the 
Drop Shadow command (Object menu) to apply a 

default dropshadow. 


Click a third time about 55mm down the left. 

Hold down the Shift key and click a fourth 
time roughly 400mm across the spread, then a fifth 
time just below the bottom of the right-hand page. 
Release the Shift key and finish off the inverted L 
shape with two more Pen clicks. 


Zoom back out so you can see the entire 

spread. With the inverted L shape still selected 
(if it isn't, switch to the Selection tool and click on 
it), choose the Place command from the File menu. 
Locate the tutorial file oilswirl.jpg on the cover CD 
and click Choose. 


menu. Click on the ‘Wrap Around Object 
Shape’ button. In the Contour Options section of 
the palette, change the Type to Alpha Channel. 
InDesign automatically picks up the transparent 
areas of the Photoshop-native file and creates an 
appropriate text wrap. 


8 | Open the Text Wrap palette from the Window 


pas te 
nci tin ver ipsummodit iri 
trud dolor sim iusto conseq- 


Zoom into the inner corner of the inverted L on 

the right-hand page. Press the = key to 
activate the ‘Add Anchor Point’ tool. Click on the 
path roughly 20mm to the left and below the corner 
point to add two new points. Press the - key and 
click on the corner point itself to delete it. 


Press Command+Shift+A in Mac OS or 

Ctrl+Shift+A in Windows to deselect 
everything. Repeat the Place command, this time 
choosing the tutorial file thinker.psd. Since no box is 
currently selected, you must click somewhere on the 
spread to place the image in its own new frame. 


Tie at Layout Type Object” Table View Window Help _& 
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masters of spin 


9 | Click on Text layer in the Layers palette. With 
the Type tool, drag out a large box for the 
headline and type in “masters of spin”. Select the 
text and use the Character palette (Type menu) to 
change its font (we used Arial Black), type size 
(130pt) and kerning (optical) to fit. 


ggasi maT 


Hide guides 

There are two principal ways in 
InDesign of previewing a page 
without all the layout guides. The 
first is to use the Hide Guides 
and Hide Frame Edges 
commands under the View menu. 
The other much quicker approach 
is to click on the Preview Mode 
button at the bottom of the main 
Tools palette, which also hides 
the pasteboard. As long as you 
don't have any text box selected, 
just type W to toggle Preview 
Mode on and off. 


10 | Select the word ‘spin’ only and click on the red 
colour in the Swatches palette to apply it to 
the text. Select ‘masters of’, switch to the 
Eyedropper tool, and click once on a blue area of 
the oilswirl image. Then click on the selected text to 
apply that blue. 


Use the Type tool and Character palette to 

add a standfirst just below the headline as 
shown. Click on Pictures layer in the Layers palette 
and add a pull-quote text box directly over the 
thinker.psd image. To make it visible, open the ‘Text 
Frame Options' dialog (under the Object menu) and 
tick ‘Ignore Text Wrap’. 


There’s/nothing quite ag 
t enics 3 
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Our choice of white-out text in the pull-quote 
(using the Paper colour in the Swatches 
palette) is too strong. Switch to the Selection tool 
and open the Transparency palette. Click on the 
pop-up where it says Normal and change it to 
Overlay. This mixes the text into the image gently. 


Part 3: Finishing touches 


Brighten your pages with vector artwork with a little help from layers and feathering... 


InDesign 2.0 for 
Macintosh & 
Windows 

(Visual Quickstart Guide) 


Sandee Cohen 
Peachpit Press 
£16.99 

ISBN: 0201794780 


Offering not only a solid 
foundation course in the 
operation of InDesign 2, this 
latest addition to the quickstart 
range also acts as a handy 
reference. Following a similar 
layout to other guides in the 
series, each chapter covers a tool 
or command thoroughly before 
moving through a numbered step 
tutorial to show the tool or 
command in action. Crisp 
illustrations enable you to keep a 
visual check on your progress. 
Read either sequentially, or used 
as a reference manual, this book 
offers a stress-free introduction 


to this package. 


“ Create a new layer in the Layers palette and 
name it Stained Glass. Select that layer and 
hide the other layers by clicking on their ‘eye’ 
buttons. Use the Rectangle tool to create a box 
80x85mm (the Transform palette will help) and 
colour it magenta with the Swatches palette. 


Shift-click the three rectangles, then type 

Command+G in Mac OS or Ctrl+G in 
Windows to group them. In the Transform palette, 
rotate the group by 18 degrees, then reposition it so 
it overlaps the bottom left corner of the spread at 
X=52mm and Y=220mm, 


Edit Layout Type Object Table View Window Help | 
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Switch back to the Selection tool. Select 

Corner Effects from the Object menu. From 
the Effect pop-up, choose Rounded. In the Size 
field, enter 10mm. Tick the Preview option to test 
the effect before clicking OK. 


Show the hidden layers again by clicking on 

the empty ‘eye’ buttons in the Layers palette. 
Obviously the coloured rectangles are in the way, 
so click on the Stained Glass layer in the Layers 
palette, drag downwards, and drop it to the bottom 
of the list. 


Kx ® 
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Hold down Option+Shift in Mac OS or 

Alt+Shift in Windows as you drag the rectangle 
to one side; this creates a perfect copy. Repeat, this 
time dragging downwards. Colour these two new 
rectangles cyan and yellow respectively. 


G With the rectangles now behind everything 
else, but still selected, open the Feather dialog 
from the Object menu. Put a tick next to Feather, 
enter a Feather Width of 15mm and select Diffused 
from the Corners pop-up. Click OK, and your 
spread is finished. FEE 
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Getting started 
with Director 8.5 


Learn the basics of Director by creating 
an easy-to-use interactive CV... 


espite some impressive 
pretenders to Director's 
multimedia crown, 

' Macromedia’s behemoth is 
still streets ahead in terms of the 
complexity of applications that can be 
created with its powerful bespoke 
programming language, Lingo. 

It has won a legion of fans in the 
creative community thanks to its 
legendary ease of use, which enables 
even those with little experience of the 
Director interface to produce stunning 


interactive experiences. There is a lot 
about Director which is quite complex — 
however, there is even more that’s easier 
to use than falling off a digital log. 

We are going to get right back to 
basics and show you how to create an 
interactive CV and turn the result into an 
auto-running CD-ROM, using Director's 
host of pre-built functions, which can 
breathe life into anything your mind has 
the power to visualise. Don't forget to 
add Director as one of your skills in your 
new CV!> 


Illustration: Fudgestudios ltd [w] www.fudgestudios.com 
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Part 1: Setting the stage 


Let's start by getting things ready to build your interactive CV... 


Details 


The demo of Director 8.5 
Shockwave Studio is on the 
cover CD, You can buy the full 
version for £1115 from [w] 
www.macromedia.com. 


Complex tasks 


More complex interactions can 
be put together with limited 
programming knowledge. The 
process involves setting a 
number of scripts next to each 
other in the correct order, so you 
select a mouse down, then two 
events to happen in sequence. 
Sounds tricky, but it isn't. 
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Open your copy of Director. Make sure you 

can see the Timeline, Internal Cast, Property 
Inspector, tools and the stage. Don't worry if you 
haven't got a huge monitor; you can shrink the 
stage to 50 per cent with the drop-down box if 
space is limited. Any of these palettes that you can't 
see, you can turn on in the Window menu. 


4 | Click 32-bit image depth when prompted and 
make sure ‘Trim White Space’ is not on, and 
that Same Settings for Remaining Images’ is 
selected. This process seems over the top, but for 
large projects with many different types of media, 
you can assign certain properties which would take 
longer to modify after being imported. 


S cehriraltnatraruerermensamneaemmtesemeeera metered 
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You can select images in the Timeline or 
directly from the stage. The stacking 
arrangement of Sprites is determined by order in the 
Timeline. The image at the top of the Timeline is at 
the bottom of the stack, so we want to make sure 
that Background is at the top of the Timeline. You 
can change the order of elements in the Timeline by 
dragging to a new layer. Click on the Sprite 
information tab in the Property Inspector, circled. 


g In the Internal Cast diet you will see a 

| 2 aie button, flush left. You should click this 
and select New Cast. Think of casts as folders where 
you can store all the elements you need for your 
projects. In large projects it is best to import certain 
elements into small bite-sized casts, as you can get 
much faster access to a Cast Member. Type in ‘basic 
console’ and keep the Cast as Internal. 


ot. click on the Movie tab in the Prope! 

© inspector Change the dimensions of the movie 
to 600x480. 640x480 is the minimum monitor size 
and screen resolution, which means any potential 
employer will be able to see your CV. We have 
made the stage 40 pixels smaller to make sure even 
14-inch monitors will not crop any of the detail. 


MET 


8 | Select the sickle graphics and position them at 
the top and the bottom. You can either drag 
them in the stage and nudge their position with the 
cursor keys, or use the Sprite Property Inspector to 
position the graphics — the choice is yours. 


g A new active palette is created for the new 
cast. Import the relevant files from the 
Tutorial\ Director folder on the CD by clicking 
Import in the File menu, and import background, 
loki text, sickle_bottom and sickle_top. Importing 
images is a little odd at first - you select the images 
you wish to import, click Add and a list builds up, 
and then click Import. 
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6 | Drag the background and two sickle graphics 
to the start of the Timeline. By dragging 
straight to the Timeline instead of the stage, 
Director automatically positions the images in the 
centre of the screen. 
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9 | Drag the loki text graphic on to the stage and 
position the graphic manually above the right 
bottom line on the lower sickle graphic. There we 
have the basis for our project. 


Part 2: Making motion 


Now that the stage is set we can start animating... 


The great escape 


We also recommend putting a 
note on this CV saying ‘Press 
Escape To Quit’, as putting 
together the basic Quit button 
using Lingo was just out of the 
scope of this tutorial. 


The competitors 


Despite undoubtedly being the 
best multimedia creation 
package, there have recently 


been a number of young upstarts, 


which now excel over Director in 
a number of areas. Most notable 
is Mediator 6 EXP, which 
received one of our highest 
marks for a multimedia package 
in Computer Arts, issue 70. 


a There are, fortunately, many ways to create 
animation in Director. You can either select a 
frame in the Timeline (individual frames, rather 
than the entire cast members bar) and physically 
move a graphic, or you can use some of the 
automatic animation functions. Create another new 
cast, called Functions. 
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Select Navigation from the Library palette. You 

will find the controls for basic multimedia 
navigation in this area. Drag the control ‘Hold on 
Current Frame’ to the bar above the timelines, 
circled. Drag it to frame 28. This area can be 
expanded and stores music, functions and other 
non-graphical elements that also need to be lined 
up in the Timeline. 
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Now, create another new cast from the drop- 

down box at the top of the Cast palette called 
Buttons. Import, like earlier, the button files from 
the Buttons folder in the Tutorial\Director folder on 
the CD, with the same options as for the first set of 
imported graphics. 


Click the button that has an open book on it at 

the top of the screen. This will open the 
Library, which has a host of pre-written Lingo 
functions, that are as easy to use as dragging and 
dropping. Click the Grid button in the top-left of the 
palette and go to Animation>Automatic. 


Return to the Automatic>Animation controls 

in the Library palette. This time you should 
select the Fade In/Out control and drag it on top of 
both of the sickle graphics, setting the Fade In times 
to one second. Press Enter to play the movie and 
check your progress. Always be sure to stop after 
playing your movie. Drag the Fade once from the 
Library; after that use the one that has appeared in 
the Internal Cast, to prevent multiples of the same 
function clogging your projects. This makes sense in 
practice when you see it on screen — just not when 
you read it here, probably. 


8 | Drag the Up state of the buttons (all button 
graphics have a suffix of Up or Down) on to 
the stage and arrange them as you see fit, although 
we recommend Personal Profile at the top and ‘Get 
in Touch’ at the bottom. 


Drag the Zoom 'n/Out function to the loki text 

graphic. Specify Zoom In and change the time 
to slightly under one second Press Enter to start the 
project and you will see ‘he loki graphic zoom in to 
the screen Press Fiiter again to stop the simulation; 
you can also use the Play and Stop buttons at the 
top of the screen 


G Now, we want to stagger the fading and 
zooming, to add the effect of the console 
being built up gradually over the first few seconds. 
Select the first frame of the top sickle graphic; it will 
turn darker. Now drag this frame along the Timeline 
to the tenth frame. Drag the bottom sickle graphic's 
first frame to the 20th and the loki text graphic's 
first frame to frame 28, the last frame we created. 


g Go to Align from the Modify menu along the 
top of the screen. Shift-select the buttons and 
choose Distribute Centres for the horizontal option 
and Align Centres for the vertical. Click Align, and 
your buttons will be neatly lined up, ready for the 
nexi: phase. 


Get started 
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Part 2: Making motion continued... 


Strange behaviours 


Sometimes when using multiple 
pre-programmed behaviours like 
Zoom In and Fade, it's worth 
noting that by clicking the small 
sprocket button you can pullupa 
list of all the behaviours attached 
toa Sprite and move the order 
they are carried out in up and 
down. This becomes more 
important when you have about 
six or seven attached behaviours, 
as some can work slightly 
erratically with each other if they 
are not ordered correctly. 
Learning which combinations is, 
unfortunately, trial and error. 


Splash screens 


On the demo version of Director, 
be aware that you will get a 
massive splash screen that you 
can't remove telling whoever is 
looking at your CV CD-ROM that 
the version is not the full one. 
This should be fine for job 
interviews, but not for trying to 
show clients your projects! 


Macromedia 
Director 8 and 
Lingo Authorised 


Phil Gross 

Macromedia Press/Peachpit 
Press 

£37.34 

ISBN: 0201702622 


Coming direct from Macromedia 
itself, this manual is split into two 
sections that first covers all of 
Director's key features before 
moving into a comprehensive 
section on Lingo. 

The Lingo section in particularis 
ideal as those starting out with 
Director will need to grasp the 
basics of this language to gain 
the most from the package. 

The bundled CD offers 
comprehensive tutorial files that 
enable you to put theory into 
practice. This is of particular 
importance when learning Lingo. 
Well structured and 
comprehensive, this manual 
more than complements 
Director's own, and is your 
perfect companion as you learn 
each new feature. 
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From the Library palette, choose Animation> 
Interactive. Where we have a pre-built rollover 


function we will make the buttons exciting. Drag 
the Rollover Member Change over a button, and 
select its down state from the drop-down box. Do 
the same for the other buttons, using the function 
which is stored inside the Internal Cast setting. 


On to each of the graphics, add a fade in 


function, which is stored in your Internal Cast. 


Keep the default two seconds this time. 
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Import the blue_blob graphic, also from the 

CD, and position within the top sickle, adding 
a two-second fade in, as for Susannah. Reposition 
your buttons as needed to accommodate our sultry 
temptress of the night. Also, position this at frame 
50 in the Timeline. 


tt | We need to extend the length of the creation 
of the console on-screen. Increase the length 
of the elements in the Timeline by clicking and 


dragging the last frame left or right. You can also do 
this in the Sprite palette by typing in numbers of 
frames. Drag all elements in the last frame to the 
50th frame, and move the Hold on Current Frame 
action to frame 50 as well. 


14 | Now, much the same as for adding a fede we 
want to add a slide in effect to the buttons 
while they fade up in order. Go to Animation> 
Automatic in the Library palette and select Slide 
In/Out, and drag on to a button. The settings 
should be slid in from the right (rather than froma 
point) and the time should be set to 0.50 (half a 
second). Set the Timeline head at the start of the 
Timeline, and have a play - things are starting to 
take shape. 


Shift-select Susannah, sickle_bottom and loki 

text and nudge them all up about 20 pixels, to 
create a gap at the bottom of the screen. Import the 
blue crawler and blue strip graphic from the CD. 
Drag both to the bottom of the stage, again 
position them at frame 50. 


Stagger the first frames of the five-button 

graphics in the Timeline, as we did earlier for 
the sickle graphics and the loki text graphic. The 
Timeline should look like the screenshot. 


Import the Susannah pantie’ from the 

Tutorial\Director folder on the CD into the cast 
of your choice, position at the bottom-left of the 
screen and add a fade in, with the default two 
seconds. Position her in the Timeline so that she 
appears at the 50th frame. 


G Add the interactive animation control Sprite 
Track Mouse to the blue crawler graphic. Then 
add Constrain To Sprite and choose the only sprite 
channel option which is valid, which is our blue strip 
at the bottom. This feature now gives us a perfect 
interface, and all we need to do is add interactivity 
through time! Give it a play and test so far. 


Part 3: Jumping through time 


Add markers to your project and jump through time... 


Bitmap editing 
Director actually has a fully- 
functional (although not in the 
same league as Photoshop) 
bitmap-editing package inside it. 
So every time you spota little 
discrepancy in one of your 
graphics, rather than deleting, 
editing in Photoshop and 
reimporting, you can simply 
double-click the relevant 
graphic and edit there and then. 


rt | Director adds multimedia interactivity 
primarily through the positioning of markers 
along a timeline, and then adding Jump To controls 
to buttons, which head off to those markers. This 
project is no different. To create a marker, simply 
click the plain white bar at the top of the Timeline 
window. A marker will appear. Create and name five 
markers along the Timeline — with 30 frames 
between each, named as the buttons are. 
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4 | Now, import the other coloured blobs files 
from the CD, and position them along the 
Timeline so that for each new section, after the first, 
there is a new coloured blob. 


Select all the elements of the console in the 

Timeline and use the Sprite Properties palette 
to change all of their ending frames to 30 frames 
after the final Get In Touch marker you created. In 
our example, everything ends at frame 205, apart 
from blue blob - which we want to make only last 
until the first sections (personal profile) Hold on 
Current Frame action. 


PEE rae ae. 
5 | Whip back to the start of the Timeline. Now, in 

the Library palette, you want to select Controls 
and drag a jump to marker control to each of the 
buttons, jumping to the relevant marker. 


Now you must add Hold on Current Frame 

functions, as before, but just before each new 
marker. This means that we can jump to a marker, 
and the Timeline Head will stop before reaching a 
new marker. 
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Now, at the start of each marker, you must use 

the text tool and write the name of the section 
over the top of the button. In the Sprite Properties 
region, you can now click the Text Properties tab. 
Select Anti Alias All Text and, in the Sprite 
Properties, change the blending mode to matte to 
remove the background white colour, and change 
the text colour to white by changing the foreground 
colour in the uppermost box. 


Part 4: Final content and publishing 


Adding the final touches to your interactive CD and publishing it... 


Mac users 


When you create a projector of 
the final project, Director will not 
create a PC EXE file, but the Mac 
equivalent which can be cut toa 
CD-ROM in the usual way. PC 
users who want to create content 
for Macs (and Mac users wanting 
to create content fora PC) you 
can use the Port command ona 
created projector to convert to 
the Mac or PC equivalent. 
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1 | We will leave the content up to you. You 
know how to add motion and fading effects, 
which look classy without being OTT. So, now 
you can animate the back_grid_template that we 
have included. 
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To actually produce the CD, we need to make 

an executable file, which Director takes care 
of in a few quick clicks. Save the project, from the 
file menu and re-enter the File menu and click 
Create Projector. You must navigate to the saved 
DIR file, and select, like when importing text. In the 
Options, we suggest full screen, centered — but you 
can make your own choice! 


Save the EXE to a CD-ROM along with an 

autorun file we have prepared on the cover CD 
(Autorun. inf) and, as long as you call the created 
projector, called Projector, then it will run when you 
put the CD in a computer! Now that wasn't that 
tricky, was it? FEES) 
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SHARED HOSTING. 
Home. 100Mb £60pa 
Commerce. 

200Mb: ASP, SSL 
£18pm or £180pa 
Reseller. 

Host Unlimited Domains 
ASP, SSL 

£45pm or £450pa 
Enterprise. 

Mirrored, load-balanced 
Servers 1O00Mb 
£120pm or £1,200pa 


Features 

Microsoft Windows 2000/NT 
based Web Services running IIS 
Web Based Control Panel 
Microsoft FrontPage 2002 
Server Extensions 

FREE Domain Name Registration 
or Transfer 

30 Day Money Back Guarantee 
FREE dial-up access 
Telephone/EMail Technical Support 


DEDICATED HOSTING. 

Gold 

600Mhz, 128Mb, 10Gb Drive 
£200pm or £2,000pa 
Diamond 

700 Mhz, 256Mb, 2x9Gb SCS| 
£300pm or £3,000pa 
Platinum 

850 Mhz, 512Mb, 2x18Gb SCS| 
£400pm or £4,000pa 


Features 

Microsoft Windows 2000 
Server Powered 

Same day set-up 

No Minimum Contract 

No Set-up fee 

Secure InterHouse based 
100mb switched network 
24hr telephone/email support 
Full Administrator Level access 
Host an UNLIMITED 

number of web sites 
Web-based Control Panel 
Domain Names from £5pa 


All Trademarks acknowledged. 
All prices exclude VAT. 


eCommerce 


Domain 
Name 
Registration 
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empowering the .NET generation 


Tel O800 298 7214 


Www. inetc.net 
iInfo@inetc.net 
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The new faster iBook, now available at John Lewis. 


Be in control 

Turbocharged with a 600MHz or 700MHz PowerPC G3 processor 
with 512K on-chip level 2 cache running at full processor speed, 

a. 100MEZz system bus and 256MB of SDRAM, the 14.-inch screen 
iBook packs some serious power. Not to be outdone, the 12.1-inch 
screen iBook gives you a choice of 600MHz or J00MHz PowerPC 
G3 processors, a system bus speed running at 100MHz, and 128MB 
of SDRAM. 


All models are expandable up to 640MB of RAM, and come with 
the ATI Mobility Radeon graphics accelerator with 16MB of 
dedicated memory and AGP 2X support for gorgeous 3D graphics. 


All under one roof 

John Lewis department stores not only stock the award-winning 
Apple iBook, iMac and G4 series, but in fact you can buy any Apple 
product in our shops, including a wide range of monitors, printers, 
scanners and other accessories. 


* See in store for details 
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Satisfaction guaranteed 

As well as the John Lewis reputation for quality and value to give 
you peace of mind, we offer a free 2-year guarantee with every 
Apple computer as standard 


Combined with service 
Our after-sales support services are designed to make your 
John Lewis experience even more positive. 


If you want to know more, then visit your nearest 
John Lewis shop. 


Available at selected branches of 


ohn Lewis 


wwwjohnlewis.com 


